[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jquery form validation and required radio buttons

Posted on 2011-10-11
8
Medium Priority
?
564 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:cbeverly
  • 4
  • 3
8 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 36951052
first of all Line 65

                    },

-->

                    }

ie: remove ","
0
 

Author Comment

by:cbeverly
ID: 36951125
I removed that but it makes no difference.
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 36951149
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

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:cbeverly
ID: 36951198
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36951374
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&mdash;visit<br />
                   <input type="radio" id="tourTypePhone" class="tourType"  name = "tourType" value="Outreach telephone" />Outreach&mdash;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&mdash;visit</label><br />
                   <input type="radio" id="tourTypePhone" class="tourType"  name = "tourType" value="Outreach telephone" /><label for="tourTypePhone">Outreach&mdash;by telephone</label><br /><br />
0
 

Author Comment

by:cbeverly
ID: 36951505
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

0
 
LVL 61

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 36952366
add this

<style type="text/css">
.block { display: block; }
label.error { display: none; }      
</style>

and this

<label for="tourType" class="error">Select Type of Visit</label>

here is the code...
<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>

<style type="text/css">
.block { display: block; }
label.error { display: none; }	
</style>

<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 />

<label for="tourType" class="error">Select Type of Visit</label>
               
      			<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

0
 

Author Closing Comment

by:cbeverly
ID: 36955539
Everything is working now. Thank you so much!!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month17 days, 21 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question