0

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.

Brian Surowiec
  • 17,123
  • 8
  • 41
  • 64
  • 1
    [How to control frequency of dependent fields validation?](https://github.com/jwaliszko/ExpressiveAnnotations#how-to-control-frequency-of-dependent-fields-validation) ...if you want to turn this feature off entirely, set it to undefined (validation will be fired **on form submit attempt only**): ``. – jwaliszko Aug 25 '16 at 20:26
  • @jwaliszko that solved my problem, add it as an answer and I'll accept it. I promise it'll be sooner than 8 months too :) – Brian Surowiec Apr 25 '17 at 16:24

1 Answers1

0

I'm sure you've tried using 

display:block;

instead of

visibility:visible;

in your CSS.

alexjbrown2
  • 101
  • 4