So erzwingen Sie eine HTML5-Formularüberprüfung, ohne sie über jQuery zu senden

Ich habe dieses Formular in meiner App und werde es über AJAX senden, aber ich möchte HTML5 für die clientseitige Validierung verwenden. Daher möchte ich die Formularvalidierung erzwingen können, möglicherweise über jQuery.

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

Verwenden Sie Folgendes, um zu überprüfen, ob ein bestimmtes Feld gültig ist:

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

Verwenden Sie Folgendes, um zu überprüfen, ob das Formular gültig ist:

$('#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 durch Senden des Formulars wie folgt tun:

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();
}

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

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()

from: HTML5-Formularüberprüfung

Der folgende Code funktioniert für mich.

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

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

});

Hier ist ein allgemeinerer Weg, der etwas sauberer ist:

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

<form class="validateDontSubmit">
...

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

$(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>), mit der 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 einreichen müssen, damit die Validierung erfolgt - der Aufruf von checkValidity()ist ausreichend (zumindest in Chrome). Wenn andere Kommentare zum Testen dieser Theorie in anderen Browsern hinzufügen könnten, werde ich diese Antwort aktualisieren.
• Das Ding, das die Validierung auslöst, muss nicht innerhalb der sein <form>. Dies war nur eine saubere und flexible Möglichkeit, eine Allzwecklösung zu finden.

Vielleicht zu spät zur Party, aber irgendwie habe ich diese Frage gefunden, als ich versucht habe, ein ähnliches Problem zu lösen. Da bei mir kein Code von dieser Seite funktioniert hat, habe ich in der Zwischenzeit eine Lösung gefunden, die wie angegeben funktioniert.

Das Problem ist, wenn Ihr <form>DOM ein einzelnes <button>Element enthält , das <button>nach dem Auslösen automatisch die Form verdirbt. Wenn Sie mit AJAX spielen, müssen Sie wahrscheinlich die Standardaktion verhindern. Aber es gibt einen Haken: Wenn Sie dies nur tun, verhindern Sie auch die grundlegende HTML5-Validierung. Daher ist es ratsam, 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 Senden. jQuery checkValidity()hilft dabei:

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

Mit dem oben beschriebenen Code können Sie die grundlegende HTML5-Validierung (mit Typ- und Musterübereinstimmung) OHNE Senden des Formulars verwenden.

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

HTML5 "hat" integrierte Optionen zum Überprüfen eines Formulars. B. die Verwendung des Attributs "Erforderlich" für ein Feld, das (basierend auf der Browserimplementierung) die Formularübermittlung ohne Verwendung von Javascript / jquery fehlschlagen kann.

Mit javascrip / jquery können Sie so etwas tun

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

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

Um alle erforderlichen Formularfelder zu überprüfen, ohne die Schaltfläche "Senden" zu verwenden, können Sie die folgende Funktion verwenden.

Sie müssen den Steuerelementen das erforderliche Attribut zuweisen .

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });

Sie benötigen jQuery nicht, um dies zu erreichen. Fügen Sie in Ihrem Formular Folgendes hinzu:

onsubmit="return buttonSubmit(this)

oder in JavaScript:

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

In Ihrer buttonSubmitFunktion (oder wie auch immer Sie es nennen) können Sie das Formular mit AJAX senden. buttonSubmitwird nur aufgerufen, wenn Ihr Formular in HTML5 validiert ist.

Falls dies jemandem hilft, ist hier meine buttonSubmitFunktion:

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 Senden-Schaltflächen, daher diese Zeile if (submitvalue == e.elements[i].value). Ich habe den Wert für die submitvalueVerwendung eines Klickereignisses festgelegt.

Ich hatte eine ziemlich komplexe Situation, in der ich mehrere Senden-Schaltflächen benötigte, um verschiedene Dinge zu verarbeiten. Zum Beispiel Speichern und Löschen.

Die Basis war, dass es auch unauffällig war, so dass ich es nicht einfach zu einem normalen Knopf machen konnte. Wollte aber auch die HTML5-Validierung nutzen.

Außerdem wurde das Übermittlungsereignis überschrieben, falls der Benutzer die Eingabetaste drückte, um die erwartete Standardübermittlung auszulösen. in diesem Beispiel speichern.

Hier sind die Bemühungen der Verarbeitung des Formulars, weiterhin mit / ohne Javascript und mit HTML5-Validierung mit Submit- und Click-Ereignissen zu arbeiten.

jsFiddle Demo - HTML5-Validierung mit Überschreibungen zum Senden und Klicken

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

Die Einschränkung bei der Verwendung von Javascript besteht darin, dass der Standard-Onclick des Browsers an das Submit-Ereignis weitergegeben werden muss, um die Fehlermeldungen anzuzeigen, ohne jeden Browser in Ihrem Code zu unterstützen. Andernfalls wird das Klickereignis, wenn es mit event.preventDefault () überschrieben wird oder false zurückgibt, niemals an das Submit-Ereignis des Browsers weitergegeben.

Es ist darauf hinzuweisen, dass in einigen Browsern das Senden des Formulars nicht ausgelöst wird, wenn der Benutzer die Eingabetaste drückt, sondern die erste Schaltfläche zum Senden im Formular ausgelöst wird. Daher gibt es ein console.log ('form submit'), das anzeigt, dass es nicht ausgelöst wird.

Sie können dies tun, ohne das Formular zu senden.

Zum Beispiel, wenn sich die Schaltfläche zum Senden eines Formulars mit der ID "Suchen" im anderen Formular befindet. Sie können das Klickereignis auf dieser Senden-Schaltfläche aufrufen und danach ev.preventDefault aufrufen. Für meinen Fall validiere ich Formular B aus Formular A Einreichung. So was

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

Dieser Weg funktioniert gut für mich:

1. Fügen Sie ein onSubmitAttribut hinzu form, vergessen Sie nicht, es returnin den Wert aufzunehmen.

   <form id='frm-contact' method='POST' action='' onSubmit="return contact()">

2. Definieren Sie die Funktion.

   function contact(params) {
       $.ajax({
           url: 'sendmail.php',
           type: "POST",
           dataType: "json",
           timeout: 5000,
           data: { params:params },
           success: function (data, textStatus, jqXHR) {
               // callback
           },
           error: function(jqXHR, textStatus, errorThrown) {
               console.log(jqXHR.responseText);
           }
       });
   
       return false;
   }

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

keine beste Antwort, funktioniert aber für mich.

Ich weiß, dass dies bereits beantwortet wurde, aber ich habe eine andere mögliche Lösung.

Wenn Sie jquery verwenden, können Sie dies tun.

Erstellen Sie zunächst einige Erweiterungen für jquery, damit Sie diese nach Bedarf wiederverwenden können.

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

Als nächstes machen Sie so etwas, wo Sie es verwenden möchten.

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

Dies funktionierte von mir, um die nativen HTML 5-Fehlermeldungen mit Formularüberprüfung anzuzeigen.

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

Hinweis: RegForm ist das form id.

Referenz

Hoffnung hilft jemandem.

Dies ist eine ziemlich einfache Methode, mit der HTML5 die Validierung für jedes Formular durchführt und gleichzeitig die moderne JS-Kontrolle über das Formular hat. Die einzige Einschränkung ist, dass sich der Senden-Button innerhalb des befinden muss <form>.

html

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

js

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}

Ich denke der beste Ansatz

wird das jQuery Validation- Plugin verwenden, das Best Practices für die Formularvalidierung verwendet und außerdem eine gute Browserunterstützung bietet. Sie müssen sich also keine Gedanken über Probleme mit der Browserkompatibilität machen.

Und wir können die Funktion jQuery validation valid () verwenden, die prüft, ob das ausgewählte Formular gültig ist oder ob alle ausgewählten Elemente gültig sind, ohne das Formular zu senden.

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>

Gemäß der Frage sollte die Gültigkeit von HTML5 zunächst mit jQuery validiert werden können. In den meisten Antworten geschieht dies nicht und der Grund dafür ist folgender:

während der Validierung mit der Standardfunktion des HTML5-Formulars

checkValidity();// returns true/false

Wir müssen verstehen, dass jQuery ein Objektarray zurückgibt, während wir dies auswählen

$("#myForm")

Daher müssen Sie den ersten Index angeben, damit die Funktion checkValidity () funktioniert

$('#myForm')[0].checkValidity()

Hier ist die Komplettlösung:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}