asked on

jquery form validation and required radio buttons

I am trying to validate a form using jquery, and am running into 2 problems:

1. If I submit a form without filling in the required entries, the form makes the background of each input field a color all EXCEPT for the radio buttons. I'd like to have the radio buttons highlighted in some way to indicate they are required also.
2. I'd like to make certain fields required only if a radio button is checked.
In this form, I'd like dateFirstYourSite, dateSecondYourSite, dateThirdYourSite required if and only if tourTypeVisit is clicked.
I'd like dateFirstPhone, dateSecondPhone, and dateThirdPhone required if and only if tourTypePhone is clicked.

All fields seem to be required even if I haven't checked the radio buttons.

Thank you!

<script>
    $(document).ready(function(){
      $("#tours").validate({
		  
		  rules: 
		  {		  		   			  
			  tourType: {
			  required: true			 			 
			  },					  		  
			  dateFirstYourSite:
			  {
				  required: function(element)
				  {
					  return $('#tourTypeVisit:checked');			
				  }
			  },
			  dateSecondYourSite:
			  {
				  required: function(element)
				  {
					  return $('#tourTypeVisit:checked');			
				  }
			  },
			  dateThirdYourSite:
			  {
				  required: function(element)
				  {
					  return $('#tourTypeVisit:checked');			
				  }
			  },
			   dateFirstPhone:
			  {
				  required: function(element)
				  {
					  return $('#tourTypePhone:checked');			
				  }
			  },
			  dateSecondPhone:
			  {
				  required: function(element)
				  {
					  return $('#tourTypePhone:checked');			
				  }
			  },
			  dateThirdPhone:
			  {
				  required: function(element)
				  {
					  return $('#tourTypePhone:checked');			
				  }
			  },
			   timePhone:
			  {
				   required: function(element)
				  {
					  return $('#tourTypePhone:checked');			
				  }
			  },		  
			  timeYourSite:
			  {
				  required: function(element)
				  {
					  return $('#tourTypeVisit:checked');			
				  }
			  },
			  
			}
 	 	});
    });
    </script>

FORM IS BELOW:

<form name="tours" id="tours" action="/education/tours/form/form_process.cfm" method="post">
                  		
                    <label for="tourType">Select Type of Visit <span style="color:red; font-weight:bold;">*</span></label><br /><br />
                   <input type="radio" id="tourTypeVisit" class="tourType"  name = "tourType" value="Outreach visit" />Outreach&mdash;visit<br />
                   <input type="radio" id="tourTypePhone" class="tourType"  name = "tourType" value="Outreach telephone" />Outreach&mdash;by telephone<br /><br />
               
      			<div id="byyoursite" style="padding:10px;border-width: 2px; border-style: double; display:none;">
                                  
                  <fieldset>
        					
                  	   <div class="column1">  
                       		<p class="noindent"><b>Preferred Dates</b> <span style="color:red; font-weight:bold;">*</span></p><br />
                       		<div class="text34Field"> 
                 	           	<label for="dateFirstYourSite">1st choice (mm/dd/yy)</label>               	
                        		<input type="date" id="dateFirstYourSite" class="date datepicker" name="dateFirstYourSite">
                  				
                       		</div>    
            
           				
                         	<div class="text34Field">
                        		<br />
                        		<label for="dateSecond">2nd choice (mm/dd/yy)</label>
                        	   	<input type="text" class="date datepicker" name="dateSecondYourSite">
                  				
                        	</div>
                                  
                        
                       		<div class="text34Field">
                        		<br />
                        		<label for="dateThird">3rd choice (mm/dd/yy)</label>                       
                        	   	<input type="text" class="date datepicker" name="dateThirdYourSite">
                  				
                        	</div>
                     	</div>
                         
                      	<div class="column2"> 
               
                      		<div class="checkboxfield">
                            	<label for="timeYourSite"><p class="noindent"><b>Preferred Times</b><span style="color:red; font-weight:bold;">*</span></p><br /></label>       
                            	<p class="small"><input type="radio" class="timeYourSite" name="timeYourSite" value="11:30 AM">11:30 AM</p>
                    		  	<p class="small"><input type="radio" class="timeYourSite" name="timeYourSite" value="12 PM">12 PM</p>
                  				<p class="small"><input type="radio" class="timeYourSite" name="timeYourSite" value="1 PM">1 PM</p>
                  				<p class="small"><input type="radio" class="timeYourSite" name="timeYourSite" value="2 PM">2 PM</p>
                    	 	 </div>                                     
                     	</div>
                   	</fieldset>
                     
                   </div>
                                          
                       
                    <!--- OUTREACH VISIT BY PHONE --->
                           
                    <div id="byphone" style="padding:10px;border-width: 2px; border-style: double; display:none;">       
                    <fieldset>
                   		<p class="noindent"><b><span style="color:red">Outreach Visit &mdash; By Telephone (up to four persons)</span></b></p><br />
                  	   	 <div class="column1">	
                       		 <div class="textfield">   
                        		    		            		
                      			<label for="tourThemePhone">Choose a theme by telephone</label>
                        		<select name="tourThemePhone">
                                    <option value="None" selected>Select one</option>                                                      
                                    <option value="America the Beautiful: Landscapes">America the Beautiful: Landscapes</option>
                                    <option value="Special Exhibitions (identify in Comments)">Self Portraits</option>                               
                                </select>
							</div>    		                       		                        
               			</div>
                        
                           <fieldset>
        					
                  	   <div class="column1">  
                       		<p class="noindent"><b>Preferred Dates</b> <span style="color:red; font-weight:bold;">*</span></p><br />
                       		<div class="text34Field"> 
                 	           	<label for="dateFirstPhone">1st choice (mm/dd/yy)</label>               	
                        		<input type="text" id="dateFirstPhone" class="date datepicker" name="dateFirstPhone">
                  				
                       		</div>    
            
           				
                         	<div class="text34Field">
                        		<br />
                        		<label for="dateSecondPhone">2nd choice (mm/dd/yy)</label>
                        	   	<input type="text" id="dateSecondPhone" class="date datepicker" name="dateSecondPhone">
                  				
                        	</div>
                                  
                        
                       		<div class="text34Field">
                        		<br />
                        		<label for="DateThirdPhone">3rd choice (mm/dd/yy)</label>                       
                        	   	<input type="text" id="dateThirdPhone" class="date datepicker" name="dateThirdPhone">
                  				
                        	</div>
                     	</div>
                         
                      	<div class="column2"> 
                      		<p class="noindent"><b>Preferred Times</b> <span style="color:red; font-weight:bold;">*</span></p><br />
                            
                            
                            <div class="textField">                                   	
                       	 		<label for="timePhone">9AM - 9PM (please indicate time below)</label>                        	
                        		<input type="text" id="timePhone" class="timePhone" name="timePhone"  maxlength="255" >          
                       		</div>    
                                         
                     	</div>
                   	</fieldset>
                            
                                               
                 	</fieldset><br />
					</div> 
                     
                     
                     <br /><br />
                                     
 					
                    
                    <div class="submitField">             
                  		<p class="noindent"><input name="submit" type="submit" value="Submit Form"></p>
                    </div>    
              
      
              </form>

Open in new window

HainKurt

first of all Line 65

},

-->

}

ie: remove ","

cbeverly

ASKER

I removed that but it makes no difference.

HainKurt

looks like this is working fine after the fix, make sure you include right libraries

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script>
    $(document).ready(function(){
      $("#tours").validate({
		  rules: {		  		   			  
			  tourType: {
			  required: true			 			 
			  },					  		  
			  dateFirstYourSite:
			  {
				  required: function(element)
				  {
					  return $('#tourTypeVisit:checked');			
				  }
			  },
			  dateSecondYourSite:
			  {
				  required: function(element)
				  {
					  return $('#tourTypeVisit:checked');			
				  }
			  },
			  dateThirdYourSite:
			  {
				  required: function(element)
				  {
					  return $('#tourTypeVisit:checked');			
				  }
			  },
			   dateFirstPhone:
			  {
				  required: function(element)
				  {
					  return $('#tourTypePhone:checked');			
				  }
			  },
			  dateSecondPhone:
			  {
				  required: function(element)
				  {
					  return $('#tourTypePhone:checked');			
				  }
			  },
			  dateThirdPhone:
			  {
				  required: function(element)
				  {
					  return $('#tourTypePhone:checked');			
				  }
			  },
			   timePhone:
			  {
				   required: function(element)
				  {
					  return $('#tourTypePhone:checked');			
				  }
			  },		  
			  timeYourSite:
			  {
				  required: function(element)
				  {
					  return $('#tourTypeVisit:checked');			
				  }
			  }
			  
			}
 	 	  });
    });
</script>

... HTML CODE HERE ...

Open in new window

cbeverly

ASKER

It still isn't working for me. I am unable to submit the form until all fields are filled in regardless if I have selected the radio button or not.

Michel Plungjan

PS: your label is wrong

<label for="tourType">Select Type of Visit <span style="color:red; font-weight:bold;">*</span></label><br /><br />
<input type="radio" id="tourTypeVisit" class="tourType" name = "tourType" value="Outreach visit" />Outreach—visit<br />
<input type="radio" id="tourTypePhone" class="tourType" name = "tourType" value="Outreach telephone" />Outreach—by telephone<br /><br />
should be

Select Type of Visit <span style="color:red; font-weight:bold;">*</span><br /><br />
<input type="radio" id="tourTypeVisit" class="tourType" name = "tourType" value="Outreach visit" /><label for="tourTypeVisit">Outreach—visit</label><br />
<input type="radio" id="tourTypePhone" class="tourType" name = "tourType" value="Outreach telephone" /><label for="tourTypePhone">Outreach—by telephone</label><br /><br />

cbeverly

ASKER

The form seems to be working now! The only problem is the text message "This field is required" is coming after the radio button and before my text so I am seeing:

Select Type of Visit *

(radio button) This field is required.Outreach—visit
(radio button) Outreach—by telephone

Is there anyway to get "This field is required either before or after the group of buttons?

This field is required
radio button) Outreach—visit
(radio button) Outreach—by telephone

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cbeverly

ASKER

Everything is working now. Thank you so much!!