So erzwingen Sie die Validierung eines HTML-Formulars, ohne es über jQuery zu senden

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

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

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

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

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

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

Wenn Sie die nativen Fehlermeldungen einiger Browser (z. B. Chrome) anzeigen möchten, können Sie dies leider nur tun, indem Sie das Formular wie folgt senden:

var $myForm = $('#myForm');

if (!$myForm[0].checkValidity()) {
    // If the form is invalid, submit it. The form won't actually submit;
    // this will just cause the browser to display the native HTML5 error messages.
    $myForm.find(':submit').click();
}

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

Der folgende Code funktioniert bei mir,

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

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

});

Ich habe festgestellt, dass diese Lösung für mich funktioniert. Rufen Sie einfach eine Javascript-Funktion wie folgt auf:

action="javascript:myFunction();"

Dann haben Sie die HTML5-Validierung … ganz einfach 🙂

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

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

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

aus: HTML5-Formularvalidierung

Hier ist ein allgemeinerer Weg, der etwas sauberer ist:

Erstellen Sie Ihr Formular wie folgt (kann ein Dummy-Formular sein, das nichts tut):

<form class="validateDontSubmit">
...

Binden Sie alle Formulare, die Sie nicht wirklich senden möchten:

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

Sagen wir jetzt, Sie haben eine <a> (innerhalb der <form>), dass Sie beim Klicken das Formular validieren möchten:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

Einige Anmerkungen hier:

• Mir ist aufgefallen, dass Sie das Formular nicht tatsächlich absenden müssen, damit die Validierung erfolgt – der Aufruf an checkValidity() reicht (zumindest in Chrom). Wenn andere Kommentare hinzufügen könnten, um diese Theorie auf anderen Browsern zu testen, werde ich diese Antwort aktualisieren.
• Das Ding, das die Validierung auslöst, muss sich nicht innerhalb von befinden <form>. Dies war nur eine saubere und flexible Möglichkeit, eine Allzwecklösung zu haben.

2022 Vanilla JS-Lösung

Reines JavaScript hat alle Funktionen, die Sie dafür brauchen. Ich weiß, dass es bei der Frage um jQuery ging, aber selbst die Antworten mit jQuery verwenden diese Funktionen, die es sind checkValidity() Und reportValidity().

Testen Sie das gesamte Formular

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.
})

Testen Sie ein bestimmtes Feld

checkValidity() Und reportValidity() kann nicht nur auf dem Formular, sondern auch auf bestimmten Feldern verwendet werden. Es ist nicht erforderlich, ein Formular oder eine Dummy-Schaltfläche zum Senden zu erstellen, wenn dies nicht erforderlich ist.

// 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 sein, die von einem Ereignis-Listener aufgerufen wird, um Sinn zu machen.

Kann zu spät zur Party kommen, aber irgendwie habe ich diese Frage gefunden, als ich versuchte, ein ähnliches Problem zu lösen. Da kein Code von dieser Seite für mich funktionierte, habe ich inzwischen eine Lösung gefunden, die wie angegeben funktioniert.

Problem ist, wenn Ihr <form> DOM enthält Single <button> Element, einmal abgefeuert, das <button> wird automatisch Formular senden. Wenn Sie mit AJAX spielen, müssen Sie wahrscheinlich die Standardaktion verhindern. Aber es gibt einen Haken: Wenn Sie dies einfach tun, verhindern Sie auch die grundlegende HTML5-Validierung. Daher ist es sinnvoll, Standardeinstellungen für diese Schaltfläche nur dann zu verhindern, wenn das Formular gültig ist. Andernfalls schützt Sie die HTML5-Validierung vor dem Absenden. jQuery checkValidity() wird dabei helfen:

jQuery:

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

Der oben beschriebene Code ermöglicht es Ihnen, die grundlegende HTML5-Validierung (mit Typ- und Musterabgleich) zu verwenden, OHNE das Formular zu übermitteln.