CODEWITHSUNDEEP
jqueryjquery-validateunobtrusive-validationjquery-ui-accordion
Wei Cheng
Wei Cheng

Reputation: 5

JQuery UI Accordion having issue with JQuery Unobtrusive Validation

I have data fields on multiple Accordion panels and only when the required fields on ALL panel were filled in, then user could submit. It seems JQuery Unobtrusive Validation is not validating the fields on the collapsed panels where the style is "display:none", here I am not asking about JQuery validation which actually seemed to be able to validate hidden fields with the proper default value, it is about the unobtrusive validation.

Here are my jsfiddle examples: first example is using the JQuery unobtrusive validation, second example is just using the JQuery validation. 

 $.validator.setDefaults({ ignore: [] });

 $.validator.setDefaults({ ignore: [] });

In those examples, the 4 fields on first panel are all required, and top 3 of second panel are require.

Above code might work for JQuery validation(in FF at least) but not for JQuery unobtrusive validation, following code didn't help: $.validator.setDefaults({ ignore: ""}); I suppose we could change the style "display:none" of collapsed panel to something else and validate again that is a bit hackish.

Upvotes: 0

Views: 251

Answers (1)

Presto Chango
Presto Chango

Reputation: 26

I had similar problem today with unobtrusive validation and bootstrap accordion. This worked for me:

$(function () {
     var formValidator = $('form').validate();
     formValidator.settings.ignore = ""; // validate hidden fields
});

Here is a fork of your first example with the change made. Note: I also commented out the call to validate in the submit function.

Upvotes: 1

Related Questions