Führen Sie JavaScript onsubmit vor Browser überprüft Formular

Question

Ich habe ein Formular mit einer Rechnungsadresse und einer Lieferadresse. Diese Adressen haben einige Felder mit dem Attribut "required".

Wenn ein Kontrollkästchen "Abrechnung als Versand verwenden" aktiviert ist, sollte die Rechnungsadresse in Versand onSubmit kopiert werden.

Aber wenn ich auf "Senden" klicke, macht zumindest chrome seine Prüfungen und beschwert sich darüber, dass ein Feld leer ist, und hält das Senden an, bevor mein copy_billing_to_shipping ausgeführt werden kann.

Gibt es einen "Hook" bei submit, der ausgeführt wird, bevor der Browser validiert?

Answer 1

könnten Sie ersetzen Ihre Taste durch einen einfachen Absenden-Button, wie folgt aus:

<input type="button" onclick="myOwnValidate(this)" /> 

und dann, wenn alles in Ihrer Validate-Methode ok ist, senden Sie das Formular:

myOwnValidate = function(input) { 
... 
if(valid) { 
    input.form.submit(); 
} 
}; 

Answer 2

Einige Leute Fügen Sie den Schaltflächen im Formular einen "Klick" -Handler hinzu, um die Validierung auszulösen. Dies ist nicht ideal, da Benutzer Formulare senden können, indem sie bei einer Texteingabe auf die Eingabetaste drücken. Dies würde die Formularvalidierung umgehen.

Der bessere Weg, dies zu tun, ist ein Ereignis Listener für das Ereignis "Senden" im Formular hinzufügen. Ihre Ereignishandlerfunktion sollte Wahr oder Falsch zurückgeben. Wenn dies der Fall ist, wird das Formular gesendet.

Stellen Sie sicher, dass Sie keine JavaScript-Fehler in Ihrem Event-Handler haben, da sonst das Formular gesendet wird.

<form id="myform"> 
    .... 
</form> 

<script> 
    function validate(e) { 
    var isValid = ...; // Some logic to determine validity. 
    return isValid; 
    } 

    document.getElementById("myform").addEventListener("submit", validate); 
</script>