如何在使用jQuery表單驗證插件時「清除」驗證錯誤？

Question

所以我有這種形式（jsfiddle link），正如你所看到的，一旦選擇了收音機選項，就會出現更多選擇。我的問題是，如果我點擊提交，然後選擇另一個單選按鈕，然後再次選擇第一個廣播選項，驗證未清除。

有沒有辦法做到這一點？我看着插件的various options，但沒有什麼突出的。

感謝

這裏是我的JS代碼：

$(document).ready(function(){ 
$("[id$=dob]").datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", yearRange: "-100:+0" }); 
    $(document).on("click", "[id^=self_service_form_type_]", function(event) { 
     for (i=0; i < 2; i++) { 
      $("#type_"+i).hide(); 
     } 
     $("#type_"+event.target.id.slice(-1)).show(); 
    }); 

    $('#selfserviceform').validate({ 
     rules: { 
      "self_service_form[studentid]": { 
       required: { 
        depends: function() { 
         return $("#self_service_form_type_0").is(":checked"); 
        } 
       } 
      } 
      , "self_service_form[studentdob]": { 
       required: { 
        depends: function() { 
         return $("#self_service_form_type_0").is(":checked"); 
        } 
       } 
      } 
      , "self_service_form[hrnumber]": { 
       required: { 
        depends: function() { 
         return $("#self_service_form_type_2").is(":checked"); 
        } 
       } 
      } 
      , "self_service_form[hrdob]": { 
       required: { 
        depends: function() { 
         return $("#self_service_form_type_2").is(":checked"); 
        } 
       } 
      } 
     } 
    , focusCleanup: true 
     , messages: { 
      "self_service_form[studentid]": "" 
      , "self_service_form[studentdob]": "" 
      , "self_service_form[hrnumber]": "" 
      , "self_service_form[hrdob]": ""    
     } 
     , submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
     } 
    }); 
}); 

Answer 1

我希望這link將會對您有所幫助。

$(document).ready(function(){ 
$("[id$=dob]").datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", yearRange: "-100:+0" }); 
    $(document).on("click", "[id^=self_service_form_type_]", function(event) { 
     for (i=0; i < 2; i++) { 
      $("#type_"+i).hide(); 
     } 
     $("#type_"+event.target.id.slice(-1)).show(); 
    }); 

    $('#selfserviceform').validate({ 
     rules: { 
      "self_service_form[studentid]": { 
       required: { 
        depends: function() { 
         return $("#self_service_form_type_0").is(":checked"); 
        } 
       } 
      } 
      , "self_service_form[studentdob]": { 
       required: { 
        depends: function() { 
         return $("#self_service_form_type_0").is(":checked"); 
        } 
       } 
      } 
      , "self_service_form[hrnumber]": { 
       required: { 
        depends: function() { 
         return $("#self_service_form_type_2").is(":checked"); 
        } 
       } 
      } 
      , "self_service_form[hrdob]": { 
       required: { 
        depends: function() { 
         return $("#self_service_form_type_2").is(":checked"); 
        } 
       } 
      } 
     } 
    , focusCleanup: true 
     , messages: { 
      "self_service_form[studentid]": "" 
      , "self_service_form[studentdob]": "" 
      , "self_service_form[hrnumber]": "" 
      , "self_service_form[hrdob]": ""    
     } 
     , submitHandler: function (form) { // for demo 
    if($("#self_service_form_type_0").is(":Checked") == true) 
    { 
     $("#self_service_form_studentid").val('') 
     $("#self_service_form_studentdob").val('') 
    } 
    if($("#self_service_form_type_1").is(":Checked") == true) 
    { 
     $("#self_service_form_hrnumber").val('') 
     $("#self_service_form_hrdob").val('') 
    } 

      alert('valid form submitted'); // for demo 
      return false; // for demo 
     } 
    }); 
});