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

【问题标题】：how to check if a form is valid programmatically using jQuery Validation Plugin如何使用 jQuery Validation Plugin 以编程方式检查表单是否有效
【发布时间】：2011-07-12 02:38:24
【问题描述】：

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

【问题讨论】：

对于那些希望使用 HTML5 和 vanilla JS（没有 jQuery）的人：stackoverflow.com/questions/12470622/…
document.forms['formID'].reportValidity() 如果所有表单元素的有效性都为真，则返回真。（对于非 jQuery 用户）

标签： javascript jquery jquery-validate

【解决方案1】：

使用 jQuery Validation 插件中的.valid()：

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

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

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

【讨论】：

谢谢，我已经在做类似的事情了： $j("#myform label.error").each( function(i,e) { if($j(e).css(' display') != 'none') { existsErrors = true ; } }); :S 谢谢
@jaime：没问题，很高兴为您提供帮助:)
实际上没有必要首先在表单上运行 .validate()。您只需执行 if (form.valid()) {} 即可，其中“form”是您要定位的表单元素。
TypeError: $("#myForm").valid() 不是函数。
如果您收到TypeError valid() not a function，请将插件添加到您的文件中，因为它是一个不包含在 jquery 库中的插件，例如。 <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

【解决方案2】：

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

【讨论】：

我们可以在整个表单上而不是在每个元素上调用它吗？
太棒了！正是我想要的
我更喜欢这个而不是 valid 函数，因为它不会调用 validate 函数并验证您的表单。
@parisssss 制作了一个模块来根据要求在多个选择中执行此操作。

【解决方案3】：

@mikemaccana 的回答很有用。

我还使用了https://github.com/ryanseddon/H5F。发现于http://microjs.com。它是一种 polyfill，你可以按如下方式使用它（示例中使用了 jQuery）：

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

【讨论】：

这个更好，因为它不会触发表单验证
使用模式属性。谢谢。
checkValidity 是本机 JS，用于检查 HTMLFormElement 和我相信的表单的有效性。更多信息here

【解决方案4】：

valid() 方法。

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

【讨论】：

【解决方案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;
}

【讨论】：

我制作了一个 jQuery 插件来为你做 .each()。

【解决方案6】：

iContribute：正确答案永远不会太晚。

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

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

【讨论】：

请注意，:input 和 :visible 选择器是 jQuery 扩展而不是 CSS 的一部分。详见docs
表单也可能因为模式匹配而无效，而不仅仅是因为缺少必填字段

【解决方案7】：

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

希望对您有所帮助！

【讨论】：