Auslösen der HTML5-Formularüberprüfung

Ich habe ein Formular mit verschiedenen Feldsätzen. Ich habe etwas Javascript, das den Benutzern die Feldsätze einzeln anzeigt. Für Browser, die die HTML5-Validierung unterstützen, würde ich sie gerne nutzen. Ich muss es jedoch zu meinen Bedingungen tun. Ich benutze JQuery.

Wenn ein Benutzer auf einen JS-Link klickt, um zum nächsten Feldsatz zu wechseln, muss die Validierung für den aktuellen Feldsatz erfolgen und den Benutzer daran hindern, bei Problemen vorwärts zu gehen.

Wenn der Benutzer den Fokus auf ein Element verliert, erfolgt im Idealfall eine Validierung.

Derzeit muss Novalidate Javascript verwenden. Würde lieber die native Methode verwenden. :) :)

Sie können die native Validierungs-Benutzeroberfläche nicht auslösen, aber Sie können die Validierungs-API problemlos für beliebige Eingabeelemente nutzen:

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

Das erste Ereignis wird checkValidityauf jedes Eingabeelement invalidausgelöst, sobald es den Fokus verliert. Wenn das Element vorhanden ist, wird das entsprechende Ereignis vom zweiten Ereignishandler ausgelöst und abgefangen. Dieser setzt den Fokus wieder auf das Element, aber das könnte ziemlich ärgerlich sein. Ich gehe davon aus, dass Sie eine bessere Lösung haben, um über die Fehler zu informieren. Hier ist ein funktionierendes Beispiel für meinen Code oben .

TL; DR: Sie interessieren sich nicht für alte Browser? Verwenden Sie form.reportValidity().

Benötigen Sie Unterstützung für ältere Browser? Weiter lesen.

Es tatsächlich ist möglich Trigger Validierung von Hand.

Ich werde in meiner Antwort einfaches JavaScript verwenden, um die Wiederverwendbarkeit zu verbessern. Es wird keine jQuery benötigt.

Nehmen Sie das folgende HTML-Formular an:

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

Und lassen Sie uns unsere UI-Elemente in JavaScript greifen:

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

Benötigen Sie keine Unterstützung für ältere Browser wie Internet Explorer? Das ist für dich.

Alle modernen Browser unterstützen die reportValidity()Methode für formElemente.

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

Das war's, wir sind fertig. Auch hier ist ein einfaches CodePen mit diesem Ansatz.

Ansatz für ältere Browser

Im Folgenden finden Sie eine detaillierte Erklärung, wie reportValidity()in älteren Browsern emuliert werden kann.

Allerdings müssen Sie nicht diese Codeblöcke in das Projekt selbst kopieren und einfügen müssen - es ist ein ponyfill / polyfill für Sie zur Verfügung.

Wo dies reportValidity()nicht unterstützt wird, müssen wir den Browser ein wenig austricksen. Was machen wir jetzt?

1. Überprüfen Sie die Gültigkeit des Formulars durch einen Anruf form.checkValidity(). Dies teilt uns mit, ob das Formular gültig ist, zeigt jedoch nicht die Validierungs-Benutzeroberfläche an.
2. Wenn das Formular ungültig ist, erstellen wir eine temporäre Senden-Schaltfläche und lösen einen Klick darauf aus. Da das Formular nicht gültig ist, wissen wir, dass es nicht tatsächlich gesendet wird. Dem Benutzer werden jedoch Validierungshinweise angezeigt. Wir werden die temporäre Senden-Schaltfläche sofort entfernen, damit sie für den Benutzer niemals sichtbar ist.
3. Wenn das Formular gültig ist, müssen wir uns überhaupt nicht einmischen und den Benutzer fortfahren lassen.

In Code:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

Dieser Code funktioniert in so ziemlich jedem gängigen Browser (ich habe ihn erfolgreich bis auf IE11 getestet).

Hier ist ein funktionierendes CodePen-Beispiel.

In gewissem Maße können Sie trigger HTML5-Formularüberprüfung durchführen und dem Benutzer Hinweise anzeigen, ohne das Formular zu senden!

Zwei Schaltflächen, eine zum Überprüfen und eine zum Senden

Setzen Sie einen onclickListener auf die Schaltfläche "Validieren", um ein globales Flag (z. B. justValidate) zu setzen, das angibt, dass dieser Klick die Validierung des Formulars überprüfen soll.

Setzen Sie einen onclickListener auf die Senden-Schaltfläche, um das justValidateFlag auf false zu setzen.

Anschließend onsubmitüberprüfen Sie im Handler des Formulars das Flag justValidate, um den Rückgabewert zu bestimmen, und rufen das preventDefault()auf, um das zu sendende Formular zu stoppen. Wie Sie wissen, wird die HTML5-Formularüberprüfung (und der GUI-Hinweis für den Benutzer) vor dem onsubmitEreignis durchgeführt. Selbst wenn das Formular GÜLTIG ist, können Sie das Senden des Formulars stoppen, indem Sie false zurückgeben oder aufrufen preventDefault().

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

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

Ich bin mir nicht sicher, ob es sich für mich lohnt, dies alles von Grund auf neu zu schreiben, da dieser in A List Apart veröffentlichte Artikel es ziemlich gut erklärt. MDN bietet auch eine praktische Anleitung für HTML5-Formulare und -Validierung (einschließlich der API und des zugehörigen CSS).

Das Hinzufügen oder Entfernen von HTML5-Validierung zu Feldsätzen ist etwas einfach.

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

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

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

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

Ich scheine den Trick zu finden: Entfernen Sie einfach das Formularattribut target, überprüfen Sie das Formular mit einer Schaltfläche zum Senden und zeigen Sie Hinweise an, prüfen Sie, ob das Formular über JavaScript gültig ist, und veröffentlichen Sie dann alles. Der folgende Code funktioniert für mich:

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

HTML Quelltext:

<form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

Javascript (mit Jquery):

<script type="text/javascript">

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

$(document).ready(function(){
// using button outside trigger click
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});
</script>

Hoffe das wird dir helfen

Wenn es einen sehr komplexen (insbesondere asynchronen) Validierungsprozess gibt, gibt es eine einfache Problemumgehung:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>

Ein anderer Weg, um dieses Problem zu lösen:

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});