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

Hier ist eine allgemeinere Methode, die etwas sauberer ist:

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

<form class="validateDontSubmit">
...

Binden Sie alle Formulare, die Sie nicht wirklich einreichen wollen:

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

Nehmen wir nun an, Sie haben eine <a> (innerhalb der <form> ), dass Sie das Formular beim Anklicken 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'
});

Hier ein paar Anmerkungen:

• Ich habe bemerkt, dass Sie das Formular nicht wirklich abschicken müssen, damit die Validierung erfolgt - der Aufruf von checkValidity() ist ausreichend (zumindest in
• T <form> .

Answer 2

Ich bin zwar spät dran, 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 gearbeitet, inzwischen kam ich mit Lösung, die wie angegeben funktioniert.

Das Problem ist, wenn Ihr <form> DOM enthalten einzelne <button> Element, sobald es ausgelöst wurde, dass <button> wird automatisch ein Summenformular erstellt. Wenn Sie mit AJAX spielen, müssen Sie wahrscheinlich Standard-Aktion zu verhindern. Aber es gibt einen Haken: Wenn Sie dies einfach tun, verhindern Sie auch die grundlegende HTML5-Validierung. Daher ist es ratsam, die Voreinstellungen für diese Schaltfläche nur zu verhindern, wenn das Formular gültig ist. Andernfalls wird die HTML5-Validierung Sie vor dem Absenden schützen. 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 Ihnen die Verwendung der grundlegenden HTML5-Validierung (mit Typ- und Musterabgleich) OHNE Übermittlung des Formulars.

Answer 3

Sie sprechen von zwei verschiedenen Dingen: "HTML5-Validierung" und Validierung von HTML-Formularen mit Javascript/Jquery.

HTML5 "verfügt" über integrierte Optionen zur Validierung eines Formulars. Wie z. B. die Verwendung des Attributs "erforderlich" für ein Feld, das (je nach Browser-Implementierung) die Übermittlung des Formulars ohne Verwendung von Javascript/Jquery verhindern könnte.

Mit javascrip/jquery können Sie etwas wie folgt tun

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

Answer 4

var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

Answer 5

Dafür brauchen Sie kein jQuery. Fügen Sie in Ihr Formular ein:

onsubmit="return buttonSubmit(this)

oder in JavaScript:

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

In Ihrem buttonSubmit Funktion (oder wie auch immer Sie sie nennen), können Sie das Formular mit AJAX übermitteln. buttonSubmit wird nur aufgerufen, wenn Ihr Formular in HTML5 validiert ist.

Falls dies jemandem hilft, hier ist meine buttonSubmit Funktion:

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

Einige meiner Formulare enthalten mehrere Übermittlungsschaltflächen, daher diese Zeile if (submitvalue == e.elements[i].value) . Ich setze den Wert von submitvalue mit einem Klick-Ereignis.