Manuelles Auslösen der Formularvalidierung mit jQuery

Question

Ich habe ein Formular mit mehreren verschiedenen Feldsets. Ich habe jQuery, das den Benutzern die Feldsätze nacheinander anzeigt. Für Browser, die die HTML5-Validierung unterstützen, würde ich gerne davon Gebrauch machen. Allerdings muss ich es unter meinen Bedingungen tun. Ich benutze JQuery.

Wenn ein Benutzer auf einen JS-Link klickt, um zum nächsten Feldset zu wechseln, muss die Validierung auf dem aktuellen Feldset erfolgen und den Benutzer daran hindern, vorwärts zu gehen, wenn es Probleme gibt.

Idealerweise erfolgt die Validierung, wenn der Benutzer den Fokus von einem Element verliert.

Derzeit habe ich novalidate aktiviert und verwende jQuery. Würde lieber die native Methode verwenden. :)

Answer 1

Zusammenfassung: Kein Interesse an alten Browsern? Verwenden Sie form.reportValidity().

Brauchen Sie Unterstützung für ältere Browser? Weiterlesen.

---

Es ist tatsächlich möglich, die Validierung manuell auszulösen.

In meiner Antwort verwende ich reinen JavaScript, um die Wiederverwendbarkeit zu verbessern - jQuery wird nicht benötigt.

---

Annehmen des folgenden HTML-Formulars:

  Validierung auslösen

Lassen Sie uns unsere UI-Elemente in JavaScript auswählen:

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

---

Sie benötigen keine Unterstützung für alte Browser wie Internet Explorer? Dann ist das für Sie.

Alle modernen Browser unterstützen die reportValidity() Methode auf form Elementen.

triggerButton.onclick = function () {
    form.reportValidity()
}

Das war's, wir sind fertig. Außerdem gibt es hier einen einfachen CodePen, der diesen Ansatz verwendet.

---

Ansatz für ältere Browser

Unten ist eine detaillierte Erklärung, wie reportValidity() in älteren Browsern emuliert werden kann.

Sie müssen diese Code-Blöcke jedoch nicht selbst in Ihr Projekt kopieren - es gibt bereits ein Ponyfill/Polyfill für Sie verfügbar.

Wo reportValidity() nicht unterstützt wird, müssen wir den Browser ein wenig austricksen. Also, was werden wir tun?

1. Die Gültigkeit des Formulars überprüfen, indem form.checkValidity() aufgerufen wird. Dies sagt uns, ob das Formular gültig ist, aber zeigt nicht die Validierungsoberfläche an.
2. Wenn das Formular ungültig ist, erstellen wir eine temporäre Absende-Schaltfläche und lösen einen Klick darauf aus. Da das Formular ungültig ist, wissen wir, dass es tatsächlich nicht gesendet wird, es zeigt jedoch dem Benutzer Validierungshinweise an. Wir entfernen die temporäre Absende-Schaltfläche sofort, sodass sie für den Benutzer niemals sichtbar ist.
3. Wenn das Formular gültig ist, brauchen wir nicht einzugreifen und lassen den Benutzer fortfahren.

---

Im Code:

triggerButton.onclick = function () {
  // Formular ist ungültig!
  if (!form.checkValidity()) {
    // Erstellen der temporären Schaltfläche, Klick und Entfernen
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Formular ist gültig, lassen Sie den Benutzer fortfahren oder tun, was wir brauchen
  }
}

Dieser Code wird in praktisch jedem gängigen Browser funktionieren (Ich habe ihn erfolgreich bis IE11 getestet).

Hier ist ein funktionierendes CodePen-Beispiel.

Answer 2

Sie können das natives Validierungsbild jedoch nicht auslösen (siehe unten), aber Sie können einfach die Validierungs-API bei beliebigen Eingabeelementen nutzen:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

Das erste Ereignis löst bei jedem Eingabeelement sofort nach dem Verlust des Fokus checkValidity aus. Wenn das Element ungültig ist, wird das entsprechende Ereignis ausgelöst und vom zweiten Ereignishandler abgefangen. Dieser setzt den Fokus wieder auf das Element, was jedoch ziemlich lästig sein könnte. Ich gehe davon aus, dass Sie eine bessere Lösung für die Benachrichtigung über Fehler haben. Hier ist ein funktionierendes Beispiel für meinen obigen Code.

UPDATE: Alle modernen Browser unterstützen die Methode reportValidity() für die native HTML5-Validierung, gemäß dieser Antwort.

Answer 3

In gewissem Maße können Sie HTML5-Formularvalidierung auslösen und dem Benutzer Hinweise anzeigen, ohne das Formular zu übermitteln!

Zwei Schaltflächen, eine zum Validieren, eine zum Übermitteln

Legen Sie einen onclick-Listener auf die Validierungsschaltfläche fest, um ein globales Flag (sagen wir justValidate) zu setzen, das anzeigt, dass dieser Klick dazu gedacht ist, die Validierung des Formulars zu überprüfen.

Und legen Sie einen onclick-Listener auf die Übermittlungsschaltfläche fest, um das Flag justValidate auf false zu setzen.

Dann überprüfen Sie im onsubmit-Handler des Formulars das Flag justValidate, um den Rückgabewert zu bestimmen, und rufen Sie preventDefault() auf, um das Formular an der Übermittlung zu hindern. Wie Sie wissen, wird die HTML5-Formularvalidierung (und der GUI-Hinweis für den Benutzer) vor dem onsubmit-Ereignis ausgeführt, und selbst wenn das Formular gültig ist, können Sie die Übermittlung des Formulars stoppen, indem Sie false zurückgeben oder preventDefault() aufrufen.

Und in HTML5 haben Sie eine Methode, um die Validierung des Formulars zu überprüfen: form.checkValidity(), dann können Sie in Ihrem Code feststellen, ob das Formular gültig ist oder nicht.

OK, hier ist die Demo: http://jsbin.com/buvuku/2/edit

Answer 4

var field = $("#field")
field.keyup(function(ev){
    if(field[0].value.length < 10) {
        field[0].setCustomValidity("Zeichenanzahl weniger als 10")

    }else if (field[0].value.length === 10) {
        field[0].setCustomValidity("Zeichenanzahl gleich 10")

    }else if (field[0].value.length > 10 && field[0].value.length < 20) {
        field[0].setCustomValidity("Zeichenanzahl größer als 10 und kleiner als 20")

    }else if(field[0].validity.typeMismatch) {
        field[0].setCustomValidity("Falsche E-Mail-Nachricht")

    }else {
        field[0].setCustomValidity("") // keine weiteren Fehler

    }
    field[0].reportValidity()

});

Answer 5

Einigermaßen einfach zu machen oder HTML5-Validierung zu fieldsets hinzuzufügen oder zu entfernen.

 $('form').each(function(){

    // LÖSCHEN ALLER HTML5 ERFORDERLICHEN ATTRIBUTE
    $(this).find('.required').attr('required', false);

    // FÜGEN SIE SIE ZURÜCK IN DAS AKTUELLE FIELDSET EIN
    // ICH VERWENDE EIN CLASS ZUM IDENTIFIZIEREN VON ERFORDERLICHEN FELDERN
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // BEWEGEN DES AKTUELLEN MARKIERERS
        $(current).removeClass('current');
        $(next).addClass('current');

        // FÜGEN SIE DIE ERFORDERLICHEN TAGS ZUM NÄCHSTEN TEIL HINZU
        // ES IST NICHT ERFORDERLICH, DIE ALTEN ZU ENTFERNEN
        // DA SIE KORREKT AUSGEFÜLLT SEIN SOLLTEN
        $(next).find('.required').attr('required', true);

    });

});