Désactiver la touche entrée sur un formulaire, sans utiliser Javascript

Vous 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.

 

 

 

Publié dans Jquery-bootstrap-css-etc
3 commentaires sur “Désactiver la touche entrée sur un formulaire, sans utiliser Javascript
  1. Jonathan dit :

    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.

    • Sebastien dit :

      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.

    • Pierre Brunet dit :

      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…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*