2012-02-23 56 views
0

我想驗證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(); 
} 

});

回答

0

一個快速的方法來處理,這將被安裝到在最後一個字段模糊事件,並將它設置執行驗證邏輯時,將被檢查的標誌。如果標誌沒有被設置,那麼邏輯終止,然後不修改DOM。