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

IT技术 javascript jquery jquery-validate
2021-03-19 18:55:15

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

6个回答

使用.valid()从jQuery验证插件:

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

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

其中表单 withid='form_id'是一个已经.validate()调用过它的表单

@jaime:没问题,很高兴为您提供帮助 :)
2021-05-04 18:55:15
谢谢,我已经在做类似的事情: $j("#myform label.error").each( function(i,e) { if($j(e).css('display') != 'none' ) {existErrors = true; } }); :S 谢谢
2021-05-08 18:55:15
实际上没有必要先在表单上运行 .validate() 。您可以简单地执行 if (form.valid()) {} 并且会起作用,其中 'form' 是您要定位的表单元素。
2021-05-12 18:55:15
类型错误:$("#myForm").valid() 不是函数。
2021-05-13 18:55:15
如果您收到TypeError valid() not a function将插件添加到您的文件中,因为它的插件未包含在 jquery 库中,例如。<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
2021-05-16 18:55:15

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

npm install jquery-html5-validity

然后:

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

然后你可以运行:

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

true
我们可以在整个形式上而不是在每个元素上调用它吗?
2021-04-22 18:55:15
伟大的!正是我要找的
2021-04-25 18:55:15
我更喜欢这个而不是valid函数,因为它不调用validate函数并验证您的表单。
2021-04-26 18:55:15
@parisssss 制作了一个module来根据要求对多个选择进行处理。
2021-05-07 18:55:15

@mikemaccana 的回答很有用。

而且我还使用了https://github.com/ryanseddon/H5Fhttp://microjs.com 上找到它是某种 polyfill,您可以按如下方式使用它(示例中使用了 jQuery):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}
使用模式属性。谢谢。
2021-04-29 18:55:15
这个更好,因为它不会触发表单验证
2021-05-01 18:55:15
checkValidity是本机 JS,用于检查HTMLFormElement我相信的 a和 Forms 的有效性更多信息在这里
2021-05-07 18:55:15

对于一组输入,您可以使用基于@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() 。
2021-04-24 18:55:15