Javascript onchange-Ereignis zu verhindern onsubmit-Ereignis in HTML-form?

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

Frage

Betrachten Sie ein HTML-Formular:

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

Es erscheint (in IE 6 und Firefox 3), dass, wenn Sie geben Sie text in das Eingabefeld und klicken auf Absenden, dass das onchange-Ereignis wird ausgelöst für das Eingabefeld, aber das onsubmit-Ereignis nicht ausgelöst wird, für die form, bis Sie auf die senden-Schaltfläche ein zweites mal (zu dem Zeitpunkt das onchange nicht ausgelöst, natürlich).In anderen Worten, die onchange scheint zu verhindern, dass die onsubmit von feuern.

Der Wunsch ist, überprüfen Sie jedes Feld im Formular, wenn der Benutzer verlässt das Feld, um Ihnen die sofortige Validierung feedback, und auch um zu verhindern, dass die Einreichung des Formulars, wenn ungültige Daten vorhanden sind.

[BEARBEITEN:Beachten Sie, dass sowohl die Validierung Funktionen enthalten, eine Warnung().]

Wie macht man dieses problem umgehen?

War es hilfreich?

Lösung

Lösung (einer Art):

Es stellt sich heraus, dass es nur die Anwesenheit von eine Warnung () oder bestätigen() - bei der Eingabe der onchange-Ereignis verursacht, dass die form onsubmit-Ereignis nicht ausgelöst.Die JS-thread angezeigt zu bekommen, blockiert von den alert().
Die Problemumgehung ist nicht eine Warnung() oder bestätigen() in der Eingabe onchange aufrufen.

Browsern bekannt sein, betroffen:
IE6 - Windows
IE8 - Win
FF3 - Win

Browser bekannt, nicht betroffen zu sein:
Google Chrome - Win
Safari - Mac
FF - Mac

Andere Tipps

Ich habe versucht, mit Firefox 3 (Mac) mit dem folgenden code:

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

Es scheint zu funktionieren.Wenn ich auf die Schaltfläche Ok, die beiden "Vali" und "Check Gültige Array -" pop-up.Anfangs dachte ich return false könnte der Grund sein, warum die form wurde nicht eingereicht, aber es IST eingereicht (mindestens, checkValidArray() genannt wird).

Nun, was machst du in deiner checkValidArray() und validate() Methoden?Etwas besonderes?Können Sie post code?

EDIT:Getestet habe ich mit IE8 und FF3 auf windows, und hier sind beide Ereignisse nicht gefeuert.Ich habe keine Ahnung, warum.Vielleicht onblur IST eine Lösung, aber WARUM onchange nicht funktionieren?Gibt es einen bestimmten Grund oder ist es nur eine weitere Ungereimtheit?(Funktioniert sowohl auf FF und Safari auf dem Mac)

Sie könnte verwenden Sie das onblur-Ereignis in Ihrem Eingänge anstelle von onchange.

Es ist ziemlich interessant, dass das Verhalten anders ist am Mac, so erscheint es Plattform-abhängig und nicht browser-abhängig.Muss sein ein Anhaltspunkt gibt es irgendwo...

Ich habe versucht, onblur mit Nivas' code, hatte aber das gleiche Ergebnis wie mit onchange (nur die "Wali" alert).

Was macht einen Unterschied, ob Sie alles in validate().Kommentieren Sie die Zeile alert("Wali");und es funktioniert!(Die tatsächliche Rückgabewert von validate() spielt keine Rolle, obwohl ich würde nicht erwarten, dass es.)

EDIT:Eine Kollegin, die gerade versucht, diese in von Google Chrome auf Windows und es funktioniert dort.Dies intuitiv sinnvoll, da, wie Chrome trennt JS threads.

Etwas über die erste Warnung() blockiert den thread Ursachen der onsubmit-Ereignis verloren gehen.Mögliche race condition?

Don ' T create ;senden-Schaltfläche.Erstellen Sie stattdessen einen normalen button und schreiben Sie eine Funktion, die aufgerufen werden können onClick mit der Schaltfläche.

Funktion tun die Validierung auf die Felder, und wenn alles in Ordnung ist, es wird senden Sie das Formular.Sonst wird es nicht.

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
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top