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.