Select Box Problems with Jquery Validation

Question

I have 9 select boxes on my page containing lots of subcategories for businesses. I require the user to select an option from only 1 of the 9 selects. To make the user experience better I hide all of the select boxes with CSS and generate a dynamic select box of categories. When a category is selected from the generated dropdown, the subcategories select box which is hidden by CSS is displayed.

My problem is when I submit the form the validation does not appear to work. On further inspection with firebug it looks like the validation does fire, but only for the first hidden select box (eating and drinking). If you look at an example page I have put together everything works as I would hope for the category eating and drinking:

http://www.clawg.co.uk/jstest/errortest.html

* No category submit form show error message
* No subcategory submit form show error message
* Change category or subcategory to blank show error message

If you select any another category and leave the subcategory blank I get an error message which is still attached to first item but cant be seen as its set to display:none. Strangely the error message does append itself to the correct item once you click on the subcategory select box, however I really need it to work on submit.

This one is really driving me nuts. Please help

Answer 1

There are a couple of things at play here.

The reason all your other options besides the first two don't validate on submit is because you have named all the rest of the selects the same thing ("category[]"). In looking through the validate.js code, when building up a list of elements to check during submit, it only picks the first element with the given name that has any rules attached to it (line 444). Because of the way it looks up whether an element has any rules (by name), it always chooses your first select with the name "cateogory[]", even when you have actually added the rule to one of your other selects.

However, the validate WILL fire when your select receives focus (and loses it, or gets changed), as you discovered. The process for doing that is separate from the process that runs when submitting the form where it has to check all the form elements.

You can use Firebug to set breakpoints in the jquery.validate.js file so you can see what is happening there.