Fangen Einreichen, bevor HTML5-Validierung

Gibt es eine Möglichkeit, zu fangen, eine form submit Aktion vor der HTML5-Validierung Schritte?

Dies ist was ich versucht habe:

HTML

<form method='post' >
    <fieldset>
        <input type='email' name='foo' required />
        <input type='submit' />
    </fieldset>
</form>

jQuery

$('form').submit(function() {
    $('fieldset').addStyle('error');
    return false;
})

Aber die submit wird nur dann ausgelöst, wenn die HTML5-Validierung geht.

  • Brauchen Sie die HTML5-Validierung? Wenn nicht, können Sie immer deaktivieren, es mit novalidate.
InformationsquelleAutor Muleskinner | 2013-02-28
  1. 8

    NÖ, der HTML5-Validierung geschieht, bevor irgendein submit-Ereignis, die in allen Browsern, daher ist es nicht möglich, andere als die änderung der Ereignis-Typ, wie ein Klick auf den button :

    $('input[type="submit"]').on('click', function() {
    $('fieldset').addClass('error');
});

    GEIGE

    • Cool - sieht genau das, was ich Suche.
    • eigentlich fehlt etwas vom code. Fügen Sie das "e" in der function(e) und innerhalb der Funktion in der ersten Zeile e.preventDefault; sonst wird das Formular Absenden. Dann, wenn Sie bereit sind, fügen Sie am Ende der Funktion $('form').submit()
    • Als input-Feld ist erforderlich, das Formular nicht Einreichen, wenn es nicht ausgefüllt, aber die Klick-Funktion auf den Absenden-button wird diese noch registrieren und fügen Sie die Klasse. Es gibt keinen Punkt beim hinzufügen ein Fehler der Klasse zu einem Formular, das eingereicht wird, so dass der obige code macht genau das was es tun soll.
    InformationsquelleAutor adeneo
  2. 7

    Jquery verwenden Sie zum deaktivieren der überprüfung auf die form, wenn die Seite zuerst geladen wird, damit können Sie verhindern, dass jegliche Prüfung aus, die vor Ihrem onsubmit - handler ausgeführt wurde:

    $(document).ready(function(){
   $('form').attr('novalidate','novalidate');
})

    und dann am Ende Ihrer onsubmit Funktion, führen Sie manuell die HTML5-Validierung auf die einzelnen Felder per javascript (mit checkValidity())

    InformationsquelleAutor Ben D
  3. 0

    Ändert sich der button von 

    <input type='submit' />

    einer regulären Taste

    <input type='button' id="submit" />

    Und nach, dass nur capture klicken Sie auf die Veranstaltung und machen das legt sich

    $('#submit').on('click', function() {
    $('fieldset').addStyle('error');

    //if everything is ok
    $('form').submit(); 
})
    • Ja, ich dachte darüber nach, aber verwarf die Idee, da bricht es dem normalen Verhalten des Formulars, zum Beispiel GEBEN Sie nicht vorlegen pr-Standard
    InformationsquelleAutor thitemple
  4. 0

    Können Sie abfangen der "invalid" Ereignis für das element gelten, der Klasse und dann return false zu stornieren

    https://developer.mozilla.org/en-US/docs/Web/Events/invalid

    Auch ich habe eine Fokus-und keydown-Ereignis zu entfernen. Klasse.

    JS:

    $('form').submit(function() {
    $('fieldset').addStyle('error');
    return false;
})
$('input').on("invalid", function(e){
   //Code: Action (like ajax...)
   $(e.target).addClass("error");
   return false;
});
$('input').on("focus", function(e){
   //Code: Action (like ajax...)
   $(e.target).removeClass("error");
});
$('input').on("keydown", function(e){
   //Code: Action (like ajax...)
   $(e.target).removeClass("error");
});

    CSS:

    .error {
    border: 2px solid red;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' >
    <fieldset>
        <input type='email' name='foo' required />
        <input type='submit' />
    </fieldset>
</form>

    Beachten Sie, dass es möglicherweise die gleichen Einschränkungen wie HTMLFormElement.reportValidity()

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

    InformationsquelleAutor alo Malbarez
Schreibe einen Kommentar