Question

I have an accordion JQuery UI control that shows two different sets of fields. At least one set has to be enabled, and when it is, it needs the validation disabled for the other set. This has been really frustrating to implement dynamically.

Finally I settled on maybe just removing the validation rules right before the submit on the set of fields that are collapsed. (So the user is no required to fill that set). However, even then I can’t seem to figure out how to attach an event to the form’s submit event that will run before the validation! I was this function to run before the JQuery validation. I’m using MVC3. Here’s what some of my code looks like:

<div id="accordion">
            <h3><a href="#">Option Set 1</a></h3>
            <div>
                 [Set of fields here]               
            </div>
            <h3><a href="#">OR Option Set 2</a></h3>
            <div>
                 [Set of fields here]  
            </div>
        </div>

Answer 1

I’m not familiar with ASP.NET MVC at all, but I am familiar with jQuery (as well as the validate plugin) so here goes.

I think you need to make all the fields within the containing <div> disabled whenever that part of your form is being rendered. It can be as simple as $("selector for div").find(":input").attr("disabled", true); (you can flip them back on using false instead of true)

This should work best for 2 reasons.

1. The jQuery Validate Plugin will skip any disabled elements
2. Disabled elements are not sent to the server when the form is posted