So überprüfen Sie mit dem jQuery Validation Plugin, ob ein Formular programmgesteuert gültig ist

93

Ich habe ein Formular mit einigen Schaltflächen und verwende das jQuery Validation Plugin von http://jquery.bassistance.de/validate/ . Ich möchte nur wissen, ob es eine Möglichkeit gibt, zu überprüfen, ob das Formular vom JQuery Validation Plugin von einer beliebigen Stelle in meinem Javascript-Code aus als gültig angesehen wird.

Jaime Hablutzel
quelle
2
Für diejenigen, die HTML5 und Vanilla JS (keine jQuery) verwenden möchten
2540625

Antworten:

141

Verwendung .valid()aus dem jQuery Validation-Plugin:

$("#form_id").valid();

Überprüft, ob das ausgewählte Formular gültig ist oder ob alle ausgewählten Elemente gültig sind. validate () muss im Formular aufgerufen werden, bevor es mit dieser Methode überprüft wird.

Wo das Formular mit id='form_id'ein Formular ist, das es bereits .validate()aufgerufen hat.

Andrew Whitaker
quelle
Danke, ich habe schon so etwas gemacht wie: $ j ("# myform label.error"). Each (Funktion (i, e) {if ($ j (e) .css ('display')! = 'None' ) {existErrors = true;}}); : S Danke
Jaime Hablutzel
@jaime: Kein Problem, gerne helfen:)
Andrew Whitaker
Es ist eigentlich nicht erforderlich, dass .validate () zuerst im Formular ausgeführt wird. Sie können einfach if (form.valid ()) {} ausführen, und das funktioniert, wobei 'form' das Formularelement ist, auf das Sie abzielen.
Gareth Daine
11
TypeError: $ ("# myForm"). Valid () ist keine Funktion.
Artgrohe
2
Wenn Sie ein TypeError valid() not a functionPlugin erhalten, fügen Sie es Ihrer Datei hinzu, da es sich um ein Plugin handelt, das nicht in der jquery-Bibliothek enthalten ist, z. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
StackEdd
33

Antwort 2015: In modernen Browsern ist dies sofort einsatzbereit . Verwenden Sie einfach die HTML5 CheckValidity-API von jQuery. Ich habe auch ein jquery-html5-Gültigkeitsmodul erstellt , um dies zu tun:

npm install jquery-html5-validity

Dann:

var $ = require('jquery')
require("jquery-html5-validity")($);

dann kannst du laufen:

$('.some-class').isValid()

true
Mikemaccana
quelle
1
können wir es in der ganzen Form nicht auf jedem Element nennen?
Parisssss
1
Toll! genau das, wonach ich gesucht habe
Fester
Ich bevorzuge dies gegenüber der validFunktion, da sie die validateFunktion nicht aufruft und Ihr Formular validiert.
KevinAdu
@parisssss Es wurde ein Modul erstellt, um dies bei Bedarf bei mehreren Auswahlen zu tun.
Mikemaccana
19

@ Mikemaccana Antwort ist nützlich.

Und ich habe auch https://github.com/ryanseddon/H5F verwendet . Gefunden auf http://microjs.com . Es ist eine Art Polyfill und Sie können es wie folgt verwenden (jQuery wird im Beispiel verwendet):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}
antongorodezkiy
quelle
Dieser ist besser, da er keine Formularvalidierung auslöst
Bishoy Hanna
Arbeiten Sie mit dem Musterattribut. Vielen Dank.
MJ Vakili
4

iContribute: Für eine richtige Antwort ist es nie zu spät.

var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
  form.submit();
}else{
  console.log("Required field missing.");
}

Auf diese Weise erfolgt die grundlegende HTML5-Validierung für 'erforderliche' Felder, ohne die Standardübermittlung unter Verwendung der 'Name'-Werte des Formulars zu beeinträchtigen.

juan.benavides
quelle
Beachten Sie, dass :inputund :visibleSelektoren jQuery-Erweiterungen sind und nicht Teil von CSS. Siehe Details in der Dokumentation
Geradlus_RU
3
Ein Formular kann auch wegen Musterübereinstimmung ungültig sein und nicht nur, weil erforderliche Felder fehlen
Frank
4

Für eine Gruppe von Eingaben können Sie eine verbesserte Version verwenden, die auf der Antwort von @ mikemaccana basiert

$.fn.isValid = function(){
    var validate = true;
    this.each(function(){
        if(this.checkValidity()==false){
            validate = false;
        }
    });
};

Jetzt können Sie damit überprüfen, ob das Formular gültig ist:

if(!$(".form-control").isValid){
    return;
}

Sie können dieselbe Technik verwenden, um alle Fehlermeldungen abzurufen:

$.fn.getVelidationMessage = function(){
    var message = "";
    var name = "";
    this.each(function(){
        if(this.checkValidity()==false){
            name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
            message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
        }
    })
    return message;
}
Matias Medina
quelle
Ich habe ein jQuery-Plugin erstellt, um .each () für Sie zu erledigen.
Mikemaccana
1

Für Magento überprüfen Sie die Validierung des Formulars wie folgt.

Sie können dies versuchen:

require(["jquery"], function ($) {
    $(document).ready(function () {
        $('#my-button-name').click(function () { // The button type should be "button" and not submit
            if ($('#form-name').valid()) {
                alert("Validation pass");
                return false;
            }else{
                alert("Validation failed");
                return false;
            }
        });
    });
});

Hoffe das kann dir helfen!

Kazim Noorani
quelle