我想驗證3字段SSN。我正在驗證這些字段(以及我的表單上的其他字段),並顯示綠色檢查字段是否有效,如果不是,則顯示紅色x以及錯誤消息。jQuery驗證組和早期成功
問題是,在我現在設置它的方式下,成功函數在第一個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();
}
});