取消隐藏时，如何防止jquery验证突出显示我的字段？

Question

On my forms I have numerous optional fields that are only needed if a prior checkbox or radio button value is supplied. To keep the form clean I'm hiding those additional fields until they're needed.

The issue I'm having is when those fields are unhidden they're being highlighted as if they had an error, most likely because they're marked as conditionally required. Is there any way to prevent this from happening so the validation only happens on submit?

I'm using ExpressiveAnnotations and unobtrusive validation is wiring everything up. My jquery validation config is:

$.validator.setDefaults({
    highlight: (element) => {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: element => {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

To hide or show the extra fields I've wrapped them in a div and toggle the visibility with a class called hidden .

Answer 1

I'm sure you've tried using

display:block;

instead of

visibility:visible;

in your CSS.