Question

我正在尝试验证3字段SSN。我正在验证这些字段（以及我的表单上的其他字段），并显示绿色检查字段是否有效，如果没有则显示红色x，以及错误消息。

问题在于，按照我目前设置的方式，成功功能在第一个SSN字段之后触发，在输入其他2个字段之前显示绿色复选标记。当然，如果他们此时离开第二个字段，他们会得到错误，但我如何设置它以便它只在输入第三个字段后验证该组。代码如下......

$('form').validate({

onfocusout: function(element) { $(element).valid(); } ,

rules: {
    tbSSN1:           {required: true, minlength: 3, regexp: /^[0-9]*$/},
    tbSSN2:           {required: true, minlength: 2, regexp: /^[0-9]*$/},
    tbSSN3:           {required: true, minlength: 4, regexp: /^[0-9]*$/},
    DOBMonth:         {required: true},
    DOBDay:           {required: true},
    DOBYear:          {required: true}
},

messages: {
    tbSSN1:           'Please enter your SSN to retreive your free credit scores.',
    tbSSN2:           'Please enter your SSN to retreive your free credit scores.',
    tbSSN3:           'Please enter your SSN to retreive your free credit scores.',
    DOBMonth:         'Please enter your DOB to retreive your free credit scores.',
    DOBDay:           'Please enter your DOB to retreive your free credit scores.',
    DOBYear:          'Please enter your DOB to retreive your free credit scores.'
},

groups: {
    SSN: "tbSSN1 tbSSN2 tbSSN3",
    DOB: "Month Day YearDropDown"
},

errorElement: "span",

highlight: function(element, errorClass) {
    var ep = $(element).parent();
    console.log(ep.find('label'));
    $(element).addClass('error');
    ep.find('label').css('color','red');
    ep.find('span.errorX').remove();
    ep.find('label').after('<span class="errorX"></span>');
},

success: function(label) {
    var lp = $(label).parent();
    label.addClass("valid"); 
    lp.find('input').removeClass('error'); 
    lp.find('label').css('color','black'); 
    lp.find('span.errorX').remove();
}

}）;

Answer 1

使用required方法：http://docs.jquery.com/Plugins/Validation/Methods/required#dependency-expression

Answer 2

处理此问题的一种快速方法是在最后一个字段上附加模糊事件，并设置一个标志，在执行验证逻辑时将检查该标志。如果没有设置标志，则逻辑终止然后在那里并且不会修改DOM。

jQuery验证组和早期成功

2 个答案: