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

时间:2011-07-12 02:38:24

标签: javascript jquery jquery-validate

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

7 个答案:

答案 0 :(得分:110)

使用.valid()

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

检查所选表单是否有效或是否全部选中   元素是有效的。之前需要在表单上调用validate()   使用这种方法检查它。

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

答案 1 :(得分:31)

2015回答:我们在现代浏览器上开箱即用,只需使用jQuery中的HTML5 CheckValidity API即可。我也做了jquery-html5-validity module来做这件事:

npm install jquery-html5-validity

然后:

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

然后你可以运行:

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

true

答案 2 :(得分:6)

@mikemaccana答案很有用。

我还使用了https://github.com/ryanseddon/H5F。找到http://microjs.com。它是某种polyfill,你可以按如下方式使用它(例子中使用jQuery):

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

答案 3 :(得分:5)

答案 4 :(得分:4)

iContribute:对于正确答案来说永远不会太迟。

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

这样,“必填”字段的基本HTML5验证就会发生,而不会使用表单的“名称”值干扰标准提交。

答案 5 :(得分:2)

对于一组输入,您可以使用基于@ 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;
}

答案 6 :(得分:0)

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

你可以试试这个:

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

希望这可以帮到你!