Le fait de taper enter dans n'importe quelle zone de texte en chrome déclenche le formulaire submit, même s'il n'y a pas de bouton submit

Question

Je construis un site qui utilise le plugin de validation de jQuery et souhaite que les choses soient validées avant de soumettre le formulaire. Mon code ressemble suit

<form> 
    <input type="button" value="Submit the Form" onclick="validateAndSubmit()" /> 
</form> 
<script language="javascript"> 

    function validateAndSubmit(){ 
    //do some validation and then submit 
} 

</script> 

Dans Firefox, cela fonctionne parfaitement. Dans Chrome, lorsque j'appuie sur Entrée, n'importe où dans la page, le formulaire de soumission est déclenché et la validation ne fonctionne pas non plus. Y at-il quelque chose à éviter? Le navigateur ne doit-il pas soumettre un formulaire lorsque nous tapons une entrée s'il n'y a pas de bouton de soumission?

Answer 1

utiliser cette syntaxe:

<form onsubmit="return validateAndSubmit()"> 
... 

si vous avez besoin pour attraper le retour clé peut-être vous pouvez le manipuler en liant une événement keydown à l'entrée et effectuer une action sur codeTouche # 13

Answer 2

Je ne suis pas sûr s'il y a une norme à ce sujet ou non. Quoiqu'il en soit, vous pouvez vous épargner le problème en adoptant simplement une stratégie plus forte: implémentez la validation en tant qu'action onsubmit sur le formulaire, plutôt qu'une action onclick pour le bouton. Je n'utilise presque jamais de boutons dans les formulaires; avoir à le faire pour le vôtre ne ferait que me décourager, et ce n'est pas bon pour les utilisateurs.

Donc de toute façon. Le formulaire onsubmit est le chemin à parcourir. Et je vous en serais reconnaissant si vous avez utilisé Javascript discret au lieu des attributs HTML :)

Answer 3

Essayez cette méthode:

<form onsubmit="return validateAndSubmit(this);"> 
    <input type="submit" value="Submit the Form"/> 
</form> 
<script language="javascript"> 

    function validateAndSubmit(form_obj){ 
    if(some_variable == 'correct_value') { 
     form_obj.submit(); 
     return true; 
    } else { 
     alert('Wrong value'); 
     return false; 
    } 
    //do some validation and then submit 
} 

</script>