如何使用jQuery Validation Plugin以编程方式检查表单是否有效

Question

我有一个带有几个按钮的表单,我正在使用来自http://jquery.bassistance.de/validate/的 jQuery Validation Plugin .我只是想知道是否有任何方法可以通过我的javascript代码中的任何位置检查表单是否被jquery验证插件视为有效状态.

Answer 1

用途.valid():

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

检查所选表单是否有效或所有选定元素是否有效.在使用此方法检查之前,需要在表单上调用validate().

表单id='form_id'中的表单是已经.validate()调用过的表单.

Answer 2

2015答案:我们在现代浏览器上开箱即用,只需使用jQuery 的HTML5 CheckValidity API.我还制作了一个jquery-html5-validity模块来做到这一点:

npm install jquery-html5-validity

然后:

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

然后你可以运行:

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

true

Answer 3

@mikemaccana答案很有用.

我也使用https://github.com/ryanseddon/H5F.在http://microjs.com上找到.它是某种polyfill,您可以按如下方式使用它(在示例中使用jQuery):

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

Answer 4

valid()方法.

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

Answer 5

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

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

现在您可以使用它来验证表单是否有效：

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

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

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