javascript - 使用 jQuery 表单验证插件时如何“清除”验证错误？

Question

所以我有这个表单（jsfiddle 链接），正如你所看到的，一旦选择了单选选项，就会出现更多选择。我的问题是，如果我单击提交，然后选择另一个单选按钮，然后再次选择第一个单选选项，则验证尚未清除。

有没有办法做到这一点？我查看了插件的各种选项，但没有什么特别突出的。

谢谢

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

我希望这个链接对你有帮助。

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