jquery在提交之前验证所有字段

Im trying to make sure that all fields are validated before submitting a form. I don't even know really where to start. I would like to have the submit button greyed out or just disabled until all the fields are successfully validated.

我试图确保在提交表单之前验证所有字段。我甚至不知道从哪里开始。我希望将提交按钮显示为灰色或仅禁用,直到成功验证所有字段。

Here is the script:

这是脚本:

$('document').ready(function(){
$('form').validate({
    rules: {
       a: {required:true, minlength:2},
       b: {required:true}
    },      
    messages: {
       a: {required: "enter your name!"},
       b: {required: "enter the date!"}                        
    },
    errorPlacement: function(error, element) {
    if(element.attr('name') == 'a'){
         $('#name').html(error);                
     }
     if(element.attr('name') == 'b'){
         $('#date').html(error);                
     }
    },
    success: function(label){
        label.addClass("valid").text("Ok!");                  
    },
    debug:true
});
$('#a').blur(function(){
    $("form").validate().element("#a");
});
});

Here is the html:

这是html:

<form action="#" id='commentForm'>
    <input type="text" name="a" id="a">
    <input type="text" name="b" id="b">
    <button type="submit">Validate!</button>
<div id="date" style="border:1px solid blue;"></div>
<div id="name" style="border:1px solid red;"></div>
</form>

And here is the jsfiddle:

这是jsfiddle:

http://jsfiddle.net/wQxQ8/12/

Thanks a ton in advance!

非常感谢提前!

1 个解决方案

#1

Without arguing if it's redundant or not (I personally like it since it's twice as clear this way)

没有争论它是否多余(我个人喜欢它,因为它是这样的两倍清晰)

Make the button disabled by default

默认情况下禁用该按钮

On each input blur, check if the form is valid.

在每个输入模糊上,检查表单是否有效。

If it is, enable the button.

如果是,请启用该按钮。

$('input').blur(function(){
    var thisform = $('form');
    if (thisform.valid()) {
        thisform.find("button").prop("disabled", false)
    }
 });

Fiddle: http://jsfiddle.net/wQxQ8/17/

You can also change blur to onkeyup, so it validates after each keystroke. It can have a performance hit though if you have a lot of inputs to validate.

您还可以将模糊更改为onkeyup,以便在每次击键后进行验证。如果您有大量输入要验证,它可能会有性能影响。

#1