Wie erzwingt man die Validierung eines HTML-Formulars, ohne es mit jQuery abzuschicken?

Question

Ich habe dieses Formular in meiner Anwendung und ich werde es über AJAX übermitteln, aber ich möchte HTML für die Client-seitige Validierung verwenden. Ich möchte also in der Lage sein, die Formularvalidierung zu erzwingen, vielleicht über jQuery.

Ich möchte die Validierung auslösen, ohne das Formular abzuschicken. Ist das möglich?

Answer 1

Um zu prüfen, ob ein bestimmtes Feld gültig ist, verwenden Sie:

$('#myField')[0].checkValidity(); // returns true|false

Um zu prüfen, ob das Formular gültig ist, verwenden Sie:

$('#myForm')[0].checkValidity(); // returns true|false

Integrierten html5-Fehler anzeigen

if (! $('#myForm')[0].checkValidity()) {
      $('#myForm')[0].reportValidity()
}

Beachten Sie, dass die HTML5-Validierung noch nicht in allen Browsern unterstützt wird.

Answer 2

Der folgende Code funktioniert bei mir,

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

Answer 3

Ich habe diese Lösung für mich gefunden. Rufen Sie einfach eine Javascript-Funktion wie diese:

action="javascript:myFunction();"

Dann haben Sie die html5-Validierung... wirklich einfach :-)

Answer 4

    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

von: html5-Formular-Validierung

Answer 5

2022 Vanilla JS-Lösung

Pure JavaScript hat alle Funktionen, die Sie dafür brauchen. Ich weiß, die Frage bezog sich auf jQuery, aber auch die Antworten mit jQuery verwenden diese Funktionen, die sind checkValidity() y reportValidity() .

Test des gesamten Formulars

let form = document.getElementById('formId');
// Eventlistener can be another event and on another DOM object this is just an example
form.addEventListener('submit', function (event) {
    // Only needed if event is submit, otherwise this line can be skipped 
    event.preventDefault();

    // This is the important part, test if form is valid
    if (form.checkValidity() === false){
        // This is the magic function that displays the validation errors to the user
        form.reportValidity();   
        return; 
    }

    // Code if all fields are valid; continue form submit or make Ajax call.
})

Testspezifisches Feld

checkValidity() y reportValidity() kann nicht nur für das Formular, sondern auch für bestimmte Felder verwendet werden. Es ist nicht nötig, ein Formular oder eine Dummy-Schaltfläche zum Absenden zu erstellen, wenn sie nicht benötigt werden.

// Get field of interest
let inputElement = document.querySelector("[name='" + inputName + "']");
// Check if the element is valid
if (inputElement.checkValidity() === false){
    // If not, show the errors to the user
    inputElement.reportValidity();
    return;
}

// Nothing? Great, continue to the Ajax call or whatever

Dies muss natürlich in einer Funktion geschehen, die von einem Ereignis-Listener aufgerufen wird, damit es Sinn macht.