Je suis à la recherche d'une méthode (la plus simple possible!) pour valider le contenu d'un formulaire de type input text de façon dynamique.
J'ai pour l'instant cet input text qui me sert de barre de recherche (pour afficher le résultat dans un tableau) et où je rentre bien évidemment du texte.
Je dois pour le moment valider mon contenu avec un bouton input submit et je souhaiterais justement m'en passer pour que la validation s'effectue à chaque fois que je tape une nouvelle lettre dans mon input text (un peu comme le comportement de la barre de recherche Google, quoi!)
Mon code (j'ai supprimé le superflu):
<form method="GET"name="FormSearch"> <!--indispensable pour utiliser un formulaire*/-->
<input id="TextSearch" class="TextSearch" type="text" name="TextSearch" placeholder="Name, CAS or Formula..." value="<?php if (isset($_GET['TextSearch'])){echo $_GET['TextSearch'];} ?>">
<input class="ValidSearch" type="submit" value="Valider" name="envoyer">
<input class="AddNew" type="submit" value="Add New..." name="AddNew"/>
</form>
<script type="text/javascript">
input.onkeyup = function(){
var myForm = document.forms["FormSearch"];
myForm.submit();
</script>
Déjà, même si ton code comporte du PHP, c'est un problème qui se résoudra efficacement avec JavaScript (donc, le topic serait mieux placé dans la section éponyme).
Ensuite, cette leçon devrait t'aider. C'est une façon de régler le souci (je suis encore débutant avec JS, donc je dois regarder de mon côté).
Pour déclencher un fonction javascript à chaque lettre tapée dans un input, l'évènement qui se prête bien est 'change'.
Donc :
elementHTML.onchange = eventHandler();
// ou bien
elementHTML.addEventListener('change', eventHandler);
Où elementHTML est l'input en question, et eventHandler est la fonction qui analyse le contenu de l'input et éventuellement répercute un résultat sur ton document.
L'évènement 'input' ne se déclenche que quand l'input perd le focus ( donc quand tu cliques ailleurs dans le document, par exemple ). 'change' se déclenche à chaque changement de valeur de l'input.
J'ai avancé pas mal et j'ai trouvé une solution en utilisant l'ajax.
Ca marche pas trop mal (j'ai perdu le fonctionnement de plusieurs fonctions sur la page au passage mais bon ...) mais je me demande si il ne serait pas possible de faire ce tri du côté "client" (si je ne me trompe pas de vocabulaire !pas taper!) c'est à dire sans ajax mais directement avec une fonction script/php sur la page sans repasser par le serveur.
J'essaie d'imiter un site qui marche comme ça, et il n'y a visiblement aucun rechargement du tableau à chaque lettre tapée (absolument aucun micro-délai), d'où mon interrogation...
J'ai donc ce code ajax qui marche mais qui ne me satisfait pas entièrement:
//fonction de recherche automatique et autocompletion dans le tableau
$('#FormSearch').keyup(function(){ //fonction qui se déclenche lors du relachement d'une touche du clavier
document.getElementById('tableau').innerHTML = ""; //on supprime le contenu actuel de tableau
var recherche=$('#TextSearch').val(); //on récupère la valeur inscrite dans le input text
//alert(recherche); //affichage pour vérification
$.ajax({
url : 'autocompletion.php',
type : 'GET',
data: {recherche:recherche},
dataType : 'html',
success : function(reponse, statut){
$(reponse).appendTo('#tableau');
//alert(reponse)
},
error : function(resultat, statut, erreur){
alert('erreurJS');
},
complete : function(resultat, statut){
}
});
});
Tout dépend de ce que fait la fonction que tu appelles avec le "keyUp". Si tu as besoin de ressources en base de données, tu auras besoin d'une requête ajax. Mais effectivement pas besoin de recharger toute la page.
Si tu n'as pas besoin de la base de données, javascript sait faire plein de choses.
Avec KeyUp, je fais une nouvelle requête SQL par ajax pour trouver les lignes qui correspondent à la recherche dans mon input text.
Effectivement j'ai besoin de ma base de données... donc je vais rester sur mon code ajax si j'ai pas le choix.
Je vais d'ailleurs ouvrir un nouveau sujet pour ça car ma première question est validée!
Merci
- Edité par BGr45 22 octobre 2021 à 16:35:13
Validation d'un input texte de façon dynamique
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)