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


93

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


2
对于希望使用HTML5和JS香草(无jQuery的)那些:stackoverflow.com/questions/12470622/...
2540625

Answers:


142

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

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

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

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


谢谢,我已经在做类似的事情:$ j(“#myform label.error”)。each(function(i,e){if($ j(e).css('display')!='none' ){existErrors = true;}}); :S谢谢
Jaime Hablutzel 2011年

@jaime:没问题,很高兴为您提供帮助:)
Andrew Whitaker

实际上,不必首先在表单上运行.validate()。您可以简单地执行if(form.valid()){},这将起作用,其中“ form”是您要定位的form元素。
Gareth Daine 2014年

11
TypeError:$(“#myForm”)。valid()不是函数。
artgrohe

2
如果您收到一个TypeError valid() not a function插件添加到您的文件,因为它的插件不包括在jQuery库中,例如。<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
StackEdd

33

2015年答案:我们已经在现代浏览器中提供了开箱即用的功能,只需使用jQuery 的HTML5 CheckValidity API。我还制作了一个jquery-html5-validity模块来执行此操作:

npm install jquery-html5-validity

然后:

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

然后您可以运行:

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

true

1
我们能以整体形式而不是每个要素来称呼它吗?
parisssss 2015年

1
大!我一直在寻找的东西
Fester 2015年

我更喜欢它而不是valid函数,因为它不会调用validate函数并验证您的表单。
KevinAdu '16

@parisssss制作了一个模块,以根据要求对多个选项进行操作。
mikemaccana



4

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的一部分。查看文档中的
Geradlus_RU

3
表单也可能由于模式匹配而无效,不仅是因为缺少必填字段
坦率地说

4

对于一组输入,您可以使用基于@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()。
mikemaccana

1

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

希望对您有所帮助!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.