2

我试图确保在提交表单之前验证所有字段。我什至不知道从哪里开始。我想让提交按钮变灰或禁用,直到所有字段都成功验证。

这是脚本:

$('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");
});
});

这是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>

这是jsfiddle:

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

提前致谢!

4

1 回答 1

1

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

  • 使按钮默认禁用
  • 在每次输入模糊时,检查表单是否有效。
  • 如果是,请启用该按钮。

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

小提琴:http: //jsfiddle.net/wQxQ8/17/

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

于 2012-12-13T22:32:17.380 回答