如何使用jQuery验证插件以编程方式检查表单是否有效

I have a form with a couple of buttons and I´m using jQuery Validation Plugin from http://jquery.bassistance.de/validate/, and I just want to know if there is a way I can check if the form is considered in valid state by jquery validation plugin from anywhere in my javascript code.

我有一个形式的按钮和我从http://jquery.bassistance.de/validate/´m使用jQuery验证插件,我只是想知道如果有一种方法我可以检查是否有效状态的形式被认为是jQuery验证插件从任何地方在我的javascript代码。

7 个解决方案

#1

Use .valid():

使用.valid():

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

Checks whether the selected form is valid or whether all selected elements are valid. validate() needs to be called on the form before checking it using this method.

检查选定的表单是否有效，或者所有选定的元素是否有效。在使用此方法检查它之前，需要对表单调用validate()。

Where the form with id='form_id' is a form that has already had .validate() called on it.

id='form_id'的表单已经调用了.validate()。

#2

2015 answer: we have this out of the box on modern browsers, just use the HTML5 CheckValidity API from jQuery. I've also made a jquery-html5-validity module to do this:

2015年的答案是:我们在现代浏览器上有了这个功能，只是使用了jQuery的HTML5 CheckValidity API。我还制作了一个jquery-html5-validity模块:

npm install jquery-html5-validity

Then:

然后:

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

then you can run:

然后您可以运行:

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

true

#3

valid() method.

有效的()方法。

http://docs.jquery.com/Plugins/Validation/valid

#4

@mikemaccana answer is useful.

@mikemaccana答案是有用的。

And I also used https://github.com/ryanseddon/H5F. Found on http://microjs.com. It's some kind of polyfill and you can use it as follows (jQuery is used in example):

我还使用了https://github.com/ryanseddon/H5F。在http://microjs.com上找到。它是一种polyfill，您可以使用如下(例如jQuery):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}

#5

iContribute: It's never too late for a right answer.

圣像贡品:正确的答案永远不会太迟。

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

This way the basic HTML5 validation for 'required' fields takes place without interfering with the standard submit using the form's 'name' values.

这样，对于“必需”字段的基本HTML5验证就会在不影响标准提交的情况下使用表单的“name”值。

#6

For a group of inputs you can use an improved version based in @mikemaccana's answer

对于一组输入，您可以使用基于@mikemaccana答案的改进版本

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

now you can use this to verify if the form is valid:

现在你可以用这个来验证表格是否有效:

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

You could use the same technique to get all the error messages:

您可以使用相同的技术来获取所有的错误消息:

$.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;
}

#7

For Magento, you check validation of form by something like below.

对于Magento，您可以通过以下方式检查表单验证。

You can try this:

你可以试试这个:

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

Hope this may help you!

希望这能对你有所帮助!

#1