Validation of generated select box

Validation of generated select box

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.

I am trying to apply a few validation rules to both select boxes and have a few rules I need to follow:

  • If the categories select box is empty show an error (got this working)
  • If subcategories select box is empty show an error
  • If both boxes are selected show a valid message (will be a label with a tick inside)
  • I want the error message for the first select to be replaced by the second select, and vice versa. 

$(document).ready(function() {

 // Search page for select box labels to build the categories select box
 selectOptions = '';
 $('#catchoice label').each( function() { 
 var option = $(this).attr('for');
 var optionTxt = $(this).text();
 selectOptions += ''+optionTxt+'';
 })

 // Prepend the select box to the page
 $('#catchoice').prepend('Choose a Category'+selectOptions+'');

 // Display a subcategory select box based on the choice from the category select box
 $('#allcategories').change(function() {
 var currentLi = $(this).val();
 $('.category').css({display:'none'})
 if($(this).val() != "") {
 $('#' + currentLi).parent().css({display: 'block'});
 } else {
 $('.category').css({display:'none'})
 }
 }); 

 // JQuery Validate
 $("#contributeform").validate({
 debug: true,
 rules: {
 allcategories: "required",
 "category[]": "required"
 },
 messages: {
 allcategories: "You must select a category",
 "category[]": "You must select a subcategory"
 }
 })

 });








































Any help would be greatly appreciated. I think the subcategory validation isn't working as it does not seem to be recognising that this element needs validation due to it being hidden initially, yet when the subcategories select is not hidden initially this works.

Heres some sample HTML of the underlying select boxes 

<ul class="clearing" id="catchoice">   
    
<li class="category"> 
        
<label for="contributeplace_eating-drinking"> Eating & Drinking</label> 
        
<select name="category[]" id="contributeplace_eating-drinking" class="grouped"> 
            
<option value=""></option> 
            
<option value="25" >African</option> 
            
<option value="26" >Asian</option> 
            
<option value="27" >British</option> 
            
<option value="190" >English</option> 
            
<option value="191" >Scottish</option> 
            
<option value="192" >Welsh</option> 
        
</select> 
    
</li> 
<li class="category"> 
    
<label for="contributeplace_health-well-being"> Health &  Well-being</label> 
    
<select name="category[]" id="contributeplace_health-well-being" class="grouped"> 
        
<option value=""></option> 
        
<option value="38" >Alternative Treatment</option> 
        
<option value="250" >Alternative &amp; Complementary Medicines</option> 
        
<option value="39" >Beauty Salons</option> 
    
</select> 
</li> 
<li class="category"> 
    
<label for="contributeplace_hotels-accomodation"> Hotels & Accomodation</label> 
    
<select name="category[]" id="contributeplace_hotels-accomodation" class="grouped"> 
        
<option value=""></option> 
        
<option value="51" >Bed &amp; Breakfast</option> 
        
<option value="52" >Halls of Residence</option> 
        
<option value="53" >Hostels</option> 
        
<option value="54" >Hotels</option> 
        
<option value="266" >Hotels - 3 Stars</option> 
        
<option value="267" >Hotels - 4 Stars</option> 
        
<option value="268" >Hotels - 5 Stars</option> 
        
<option value="269" >Hotels - Others</option> 
        
<option value="55" >Serviced Apartments</option> 
        
<option value="56" >Townhouses</option> 
    
</select> 
</li> 
<li class="category"> 
    
<label for="contributeplace_professional-services"> Professional Services</label> 
    
<select name="category[]" id="contributeplace_professional-services" class="grouped"> 
        
<option value=""></option> 
        
<option value="57" >Art, Photography &amp; Print</option> 
        
<option value="270" >Bookbinders</option> 
        
<option value="271" >Film Developers</option> 
        
<option value="272" >Photographers</option> 
        
<option value="273" >Printers</option> 
    
</select> 
</li> 
<li class="category"> 
    
<label for="contributeplace_public-services"> Public Services</label> 
    
<select name="category[]" id="contributeplace_public-services" class="grouped"> 
        
<option value=""></option> 
        
<option value="77" >Borough Councils</option> 
        
<option value="78" >Churches / Village Halls</option> 
        
<option value="79" >Citizens&#039; Advice Bureaux</option> 
        
<option value="80" >Community Centre</option> 
    
</select> 
</li> 
<li class="category"> 
<label for="contributeplace_shopping"> Shopping</label> 
    
<select name="category[]" id="contributeplace_shopping" class="grouped"> 
        
<option value=""></option> 
        
<option value="88" >Books, Games &amp; Toys</option> 
        
<option value="310" >Books - Rare &amp; Secondhand</option> 
        
<option value="311" >Booksellers</option> 
        
<option value="312" >Comics Bookshops</option> 
        
<option value="313" >Computer Games</option> 
        
<option value="314" >Dolls &amp; Dolls&#039; Houses</option> 
        
<option value="315" >Games Shops</option> 
        
<option value="316" >Model Shops</option> 
        
<option value="317" >Toy Shops</option> 
    
</select> 
</li> 
<li class="category"> 
    
<label for="contributeplace_sport-leisure"> Sport & Leisure</label> 
    
<select name="category[]" id="contributeplace_sport-leisure" class="grouped"> 
        
<option value=""></option> 
        
<option value="103" >Bingo</option> 
        
<option value="455" >Bingo Halls</option> 
        
<option value="104" >Bookmakers</option> 
        
<option value="105" >Bowling Alleys</option> 
        
<option value="106" >Cinemas</option> 
    
</select> 
</li> 
</ul>