Question

I have a form with the following format:

<form id="program" name="program method="get" action="process.jsp">

<div id="add">
some input box here...........
<input type="submit" name="action" value="Add">

</div>

<div id="exit">
some input box here...........
<input type="submit" name="action" value="Exit">

</div>

<div id="refuse">
some input box here...........     
<input type="submit" name="action" value="Refuse">

</div>

</form>

My jquery code validation is:

$("#program").validate({
          errorClass: "error",
          rules: {
       doentry: {
           required: true,
           date: true
       },
       doe: {
           required: true,
           date: true
       },
       dor: {
           required: true,
           date: true
       },
       cid: {
           selectNone: true
            }
         }
            });

where dor, doe, doentry is an <input> that is in different div, the problem is when I click on submit, on a div that is currently visible (not hidden), it requires all the other elements in the other div’s that is currently hidden to be validated as well… which I don’t want! What’s the best way to solve this just by modifying the jQuery.. so only it validates the elements that is inside a div that is currently visible and not the whole form.

Answer 1

The validation plugin has an ignore option, use that with the :hidden selector to ignore elements that aren’t visible, like this:

$("#program").validate({
      ignore: ":hidden",
      errorClass: "error",
      //rules, etc..
});