Evénement Javascript onchange empêchant un événement onsubmit au format HTML?

StackOverflow https://stackoverflow.com/questions/489527

Question

Considérons un formulaire HTML: 

<form action="" method="POST" onsubmit="return checkValidArray()">
    <input type="text" name="data" onchange="return validate(this);">
</form>

Il apparaît (dans IE 6 et Firefox 3) que, lorsque vous tapez du texte dans le champ de saisie et que vous cliquez sur Envoyer, l'événement onchange est déclenché pour le champ de saisie, mais que l'événement onsubmit ne se déclenche pas tant que vous n'avez pas cliqué. le bouton d'envoi une deuxième fois (à ce moment, onchange ne se déclenche pas, bien sûr). En d’autres termes, le changement semble empêcher l’envoi de tirer.

Le souhait est de vérifier chaque champ du formulaire lorsque l'utilisateur le quitte afin de lui fournir un retour immédiat de validation, ainsi que d'empêcher la soumission du formulaire en cas de données non valides.

[EDIT: notez que les deux fonctions de validation contiennent une alerte ().]

Comment peut-on résoudre ce problème?

Était-ce utile?

La solution

Solution (d'un genre):

Il s'avère que c'est uniquement la présence d'une alerte () - ou d'une confirmation () - lors de l'événement onchange de l'entrée qui entraîne la non-activation de l'événement onsubmit du formulaire. Le thread JS semble être bloqué par l'alerte ().
La solution de contournement consiste à ne pas inclure alert () ou confirm () dans l'appel onchange de l'entrée.

Navigateurs connus pour être affectés:
IE6 - Windows
IE8 - Win
FF3 - Win

Les navigateurs connus pour ne pas être affectés:
Google Chrome - Win
Safari - Mac
FF - Mac

Autres conseils

J'ai essayé avec Firefox 3 (Mac) avec le code suivant: 

    <html>
        <head>
            <script>
                function validate(ele)
                {
                    alert("vali");
                    return false;
                }

                function checkValidArray()
                {
                    alert("checkValidArray");
                }

            </script>
        </head>
        <body>
            <form action="" method="POST" onsubmit="return checkValidArray()">
                <input type="text" name="data" onchange="return validate(this);">
                <input type="submit" value="Ok">
            </form>
        </body>
</html>

Cela semble fonctionner. Lorsque je clique sur le bouton OK, & Quot; Vali & Quot; et " Vérifier le tableau valide " apparaitre. Au départ, je pensais que return false pourrait être la raison pour laquelle le formulaire n'a pas été soumis, mais il EST soumis (au moins, checkValidArray() est appelée).

Maintenant, que faites-vous dans vos méthodes validate() et <=>? Quelque chose de spécial? Pouvez-vous poster le code?

EDIT: J'ai testé avec IE8 et FF3 sur Windows, et ici les deux événements ne sont pas déclenchés. Je ne sais pas pourquoi. Onblur est peut-être une solution, mais POURQUOI onchange ne fonctionne-t-il pas? Y a-t-il une raison spécifique ou s'agit-il simplement d'une autre incohérence? (Fonctionne à la fois sur FF et Safari sur Mac)

Vous pouvez utiliser l'événement onblur dans vos entrées au lieu de onchange.

Il est intéressant de noter que le comportement est différent sur le Mac. Il semble donc dépendre de la plate-forme et non du navigateur. Ça doit être un indice quelque part ...

J'ai essayé onblur avec le code de Nivas, mais j'ai obtenu le même résultat qu'avec onchange (uniquement l'alerte & "; Vali &";).

Ce qui fait la différence, c’est de savoir si vous faites quoi que ce soit dans validate (). Mettez en commentaire l'alerte de ligne (& Quot; vali & Quot;); et il fonctionne! (La valeur de retour réelle de validate () n'a pas d'importance, même si je ne m'y attendrais pas.)

EDIT: Un collègue vient d’essayer dans Google Chrome sous Windows et cela fonctionne. Cela a un sens intuitif en raison de la manière dont Chrome sépare les threads JS.

Quelque chose à propos de la première alerte () bloquant le thread provoque la perte de l’événement onsubmit. Condition de concurrence possible?

Ne créez pas; bouton de soumission. Au lieu de cela, créez un bouton normal et écrivez une fonction qui peut être appelée onClick avec ce bouton.

La fonction effectuera la validation sur les champs du formulaire et, si tout va bien, elle soumettra le formulaire. Sinon, ce ne sera pas le cas. 

function validate
{
  "Piece of code to Validate your form"
  document.formName.action.value = "URL which you want to call"
 document.propFile.submit(); // It will submit he page
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top