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

285

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?

razenha
quelle
Können Sie angeben, an welcher Stelle Sie das Formular validieren möchten? Was löst die Validierung aus? Möchten Sie jedes Feld validieren, wenn der Benutzer ein Feld eingibt, es betritt / verlässt und den Wert ändert?
Peter Pajchl
6
Ich möchte in der Lage sein, so etwas zu tun: $ ("# my_form"). TriggerHtml5Validation ()
razenha
Diese Seite könnte helfen, Link
Dan Bray
Sie können dies ohne jQuery erreichen. Siehe meine Lösung.
Dan Bray

Antworten:

444

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.

Abraham
quelle
1
Ich habe Ihre Lösung ausprobiert, aber sie sendet das Formular immer noch, wenn die Zeile $ myForm.submit () ausgeführt wird.
Yashpal Singla
27
Versuchen Sie, $myForm.submit()durch$myForm.find(':submit').click()
Abraham
8
Abraham ist richtig. Sie müssen tatsächlich auf die Schaltfläche "Senden" klicken (programmgesteuert). Das Aufrufen von $ myForm.submit () löst die Validierung nicht aus.
Kevin Tighe
75
Wenn Ihr Formular keinen $('<input type="submit">').hide().appendTo($myForm).click().remove();
Senden-
15
Diese Antwort ist wegen des Tippes sehr nützlich checkValidity(), hat aber auch einen gefährlichen Fehler. checkValidity()löst native Browser-Fehlermeldungen aus, nicht das Klicken auf die Schaltfläche "Senden". Wenn Sie einen Ereignis-Listener haben, der auf das Klicken auf die Schaltfläche "Senden" hört, lösen Sie ihn aus, wenn Sie "$ myForm.find (": Senden "). Click ()" ausführen, was sich selbst auslöst und eine unendliche Rekursion verursacht.
Schlechte Anfrage
30

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

Martin Christensen
quelle
3
Das hat auch bei mir funktioniert und ich denke, das ist die beste Antwort. Ich habe action="javascript:0"das <form>und gebundene clickEvent auf das <button>to gesetzt MyFunction()und alles hat super funktioniert. Ich halte alle JS aus HTML heraus. MyFunctionkann dann testen, form.checkValidity()um fortzufahren.
Orad
3
Beispielcode ist immer hilfreich.
BJ Patel
10
Das Binden an die Formulare onsubmit()ist fast immer besser als das Binden an Schaltflächen onclick(), da es andere Möglichkeiten gibt, ein Formular zu senden. (Insbesondere durch return
Drücken
+1 Das ist unglaublich. Keine Javascript-Methodenüberprüfung mehr, wenn das Feld leer ist oder wenn es sich um eine E-Mail handelt. Der Browser kann das für uns tun! Ist dieser Cross-Browser kompatibel?
Jo E.
2
Weder action="javascript:myFunction();"noch action="javascript:0"funktioniert es im neuesten Firefox (67). Funktioniert aber auf Chrome.
Bobz
23
    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

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

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

from: HTML5-Formularüberprüfung

user1575761
quelle
4
reportValiditywird nur von Chrome 40.0
MM
Das ist CoffeeScript.
Amphetamachine
1
reportValidity wird jetzt von Firefox seit Version 49
Justin
Ich mag diesen Teil $("form")[0].reportValidity(). Ich brauche das für den Fall, dass die Gültigkeitsprüfung fehlschlägt.
fsevenm
Großartig! Danke dir!
stefo91
18

Der folgende Code funktioniert für mich.

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

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

});
Boopathi.Indotnet
quelle
1
reportValidity()ist die beste Funktion zum Hervorheben erforderlicher Felder.
Jamshad Ahmad
Ja, das funktioniert wie ein Zauber, aber nur, wenn der Browser dies unterstützt. caniuse.com/#search=reportValidity
MegaMatt
16

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.
rynop
quelle
12

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.

vzr
quelle
6

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;
});
Peter Pajchl
quelle
2
Ich möchte die Validierung auslösen, ohne das Formular zu senden.
Razenha
Gemäß Ihrem Update denke ich immer noch, dass dies die richtige Lösung ist. Sie haben nicht angegeben, wie Sie die triggerHtml5Validation()Funktion auslösen möchten . Der obige Code fügt Ihrem Formular ein Übermittlungsereignis hinzu. Beim Absenden fangen Sie das Ereignis ab und validieren das Formular. Wenn Sie das Formular niemals senden möchten, erfolgt die Übermittlung einfach return false;und niemals.
Peter Pajchl
7
return (valid) ? true : false=== return valid. :)
Davi Koscianski Vidal
1
Ups, ich habe @davi + 1'ed, weil ich zuerst genau das Gleiche gedacht habe. Aber es ist nicht wirklich dasselbe, da return validfür null / undefinierte Werte einfach nicht false zurückgegeben wird. Aber es ist nicht wirklich wichtig, die Antwort war sowieso Pseudocode, der Punkt ist: benutze return false, um das Formular nicht einzureichen ^^
T_D
5
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}
Rafik Malek
quelle
Auf Chrom 74 funktioniert es nicht. Könnte ich Licht ins Dunkel bringen?
Codexplorer
3

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();              
          }
        });
  });
Trusha Soni
quelle
3

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.

Dan Bray
quelle
2

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.

fyrye
quelle
Wir sind uns sehr bewusst, dass dies ohne jQuery möglich ist, aber der von OP verfasste Titel dieses Themas lautet: "So erzwingen Sie eine HTML5-Formularvalidierung, ohne sie über jQuery zu senden", was ausdrücklich darauf hindeutet, dass jQuery verwendet werden muss.
vzr
@vzr Meine Antwort wird jQueryexplizit verwendet. Es unterscheidet sich darin, dass es die Verarbeitung der HTML5-Validierung mit mehreren Übermittlungsschaltflächen behandelt und die Übermittlung des AJAX-Formulars verhindert, wenn es ungültig ist. Standardmäßig wird die saveAktion verwendet, wenn der Benutzer die enterTaste auf der Tastatur drückt . Zum Zeitpunkt meiner Veröffentlichung war keine der bereitgestellten Antworten eine Lösung für mehrere Senden-Schaltflächen oder das Erfassen der Eingabetaste, um eine Ajax-Übermittlung zu verhindern.
Fyrye
2

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
}
zawhtut
quelle
2

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;
    }
Jeaf Gilbert
quelle
1
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

keine beste Antwort, funktioniert aber für mich.

Keyrr Perino
quelle
1

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>
David Thompson
quelle
1
$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});
Matias Elorriaga
quelle
$ (document) .on ("submit", false); // dieser hat perfekt funktioniert, das ist was ich gesucht habe :)
Akshay Shrivastav
1

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.

Shaijut
quelle
Sie müssen ein Ereignis hinzufügen, um die deaktivierte Schaltfläche zum
Senden
1

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...
}
Aaron
quelle
0

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>
طلحة
quelle
0

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