Blog Déménageur de SiteVous avez codé un formulaire, avec une belle fonction javascript de validation, mais voilà, lorsque l’utilisateur appuie sur la touche entrée, le formulaire est « submit » sans déclencher la fonction de validation.
Après avoir lu tout StackOverflow, vous avez essayé des tas d’astuces avec Javascript, Jquery, PreventDefault etc mais rien ne marche correctement ? Oubliez tout ça, on va faire plus simple
Première étape : comprendre pourquoi Entrée envoie le formulaire
Lorsqu’un formulaire ne contient qu’un seul champ texte, l’appui sur la touche Entrée ENVOIE le formulaire. C’est le comportement normal et attendu.
Désactiver la touche entrée par de vilains javascripts est tout à fait contraire à l’esprit des formulaires.
Seconde étape : la solution simple
1) ajoutez dans votre formulaire un champ texte VIDE avec un nom inutilisé, une valeur vide
<input type="text" name="fauxinput" class="fauxinput" value="">
2) cachez ce champ avec une simple règle CSS
.fauxinput {
display:none !important;
}
Et voilà ! La touche entrée reste active sur les boutons submit, vos fonctions de validations sont conservées, et ça n’a pas coûté une ligne de JS.
Bonjour tous les monde,
Je pense qui n’a pas moyen de désactiver la touche « ENTER » qui envoie le formulaire, mais pour contourner ce petit innovent, moi je me créer un input type radio et lui dit que ce champ est obligatoire avec l’instruction suivant « required ». Ensuite je dis à mes clients d’activer ce champ avant d’envoyer le formulaire. Quand on appui sur la touche « ENTER » le formulaire va vous dire que ce champ (input type radio) est obligateur et le formulaire ne sera pas envoyer avant que la case soit activée. Évidement ce input type radio serre jute à bloque l’envoi du formulaire rien d’autres et on attribut aucune action a ce input. Ce n’est peut-être pas une solution très logique, mais ce fonctionne.
required
Bonjour,
6 ans plus tard, je tombe sur cet article et j’applique bêtement la solution dans un de mes formulaires où j’ai retiré le bouton Submit car je traite les données d’input différemment et hop, cela fonctionne parfaitement et évitant ainsi de fausses manipulations en validant des champs input pour rien.
Merci pour ce partage qui est utile.
Je rajouterais que j’ai juste mis le display directement en style du champs pour réduire le code à reprendre, j’ai bien entendu retiré la classe pour éviter d’avoir du code inutile.
Bonsoir Sebastien, je viens d’essayer ta solution et elle fonctionne correctement chez moi (sous firefox 52.0.2 (32 bits)).
Merci bien.
Bonjour (ou Bonsoir).
Étant actuellement toujours en recherche d’une solution pour pallier ce problème de déclenchement de validation par l’appui de la touche d’entrée (d’autant plus problématique que je dispose d’un champs de saisie de tags où les mots-clés se séparent pas l’appui de ladite touche) j’ai scrupuleusement mis en pratique ce que vous suggérez ici Sebastien et cela ne fonctionne pas. Vous mentez dans ce post et faites perdre du temps.
Moralité : Lorsque l’on ne sait pas on ne poste pas des conneries induisant les autres en erreur.
Bonjour et merci pour ce commentaire très sympathique, où vous n’apportez aucun élément permettant de faire avancer ce sujet technique. Je vous souhaite une très bonne journée à la recherche de votre solution.
Jonathan > T’es loin de l’esprit de partage du web et des développeur toi XD
Une solution peut ne pas marcher sur un environnement technique précis. Là il aurait été judicieux de voir pourquoi ça ne marchait pas dans votre cas…