How do I prevent jquery validation from highlighting my fields when I unhide them?

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.