form validation with jquery but not on hidden

Discussion in 'jQuery' started by mrfisherman2010, Mar 8, 2011.

  1. #1
    I have two tables: the first is shown and the second is hidden.

    If the last two items (in color) in the first table have either "Yes" choices selected, then the second table appears.

    I'm having trouble getting the form to submit when the second table is hidden. If the second table is hidden, I don't care whether the radio buttons are selected or not.

    I've been messing around with the jQuery Validation Plugin at jquery.bassistance.de/validate/demo/milk , but I can't seem to get it to work.

    Here's my attempt:





    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<title>Survey</title>
    	
    
    <style type="text/css">
    
    /* Signup form */
    
    #signupform table {
      border-spacing: 0px;
      border-collapse: collapse;
      empty-cells: show;
    }
    
    #signupform .label {
      padding-top: 2px;
      padding-right: 8px;
      vertical-align: top;
      text-align: right;
      width: 125px;
      white-space: nowrap;
    }
    
    #signupform .field {
      padding-bottom: 10px;
      white-space: nowrap;
    }
    
    #signupform .status {
      padding-top: 2px;
      padding-left: 8px;
      vertical-align: top;
      width: 246px;
      white-space: nowrap;
    }
    
    #signupform .textfield {
      width: 150px;
    }
    
    #signupform label.error {
      background:url("http://jquery.bassistance.de/validate/demo/images/unchecked.gif") no-repeat 0px 0px;
    
      padding-left: 16px;
    
      padding-bottom: 2px;
    
      font-weight: bold;
    
      color: #EA5200;
    }
    
    #signupform label.checked {
      background:url("http://jquery.bassistance.de/validate/demo/images/checked.gif") no-repeat 0px 0px;
    }
    
    #signupform .success_msg {
      font-weight: bold;
      color: #0060BF;
      margin-left: 19px;
    }
    
    #signupform #dateformatStatus, #signupform #termsStatus {
      margin-left: 6px;
    }
    
    #signupform #dateformat_eu {
     vertical-align: middle;
    }
    
    #signupform #ldateformat_eu {
      font-weight: normal;
      vertical-align: middle;
    }
    
    #signupform #dateformat_am {
      vertical-align: middle;
    }
    
    #signupform #ldateformat_am {
      font-weight: normal;
      vertical-align: middle;
    }
    
    #signupform #termswrap {
      float: left;
    }
    
    #signupform #terms {
      vertical-align: middle;
      float: left;
      display: block;
      margin-right: 5px;
    }
    
    #signupform #lterms {
      font-weight: normal;
      vertical-align: middle;
      float: left;
      display: block;
      width: 350px;
      white-space: normal;
    }
    
    #signupform #lsignupsubmit {
      visibility: hidden;
    }
    
    
    .jscom, .mix htcom   { color: #4040c2; }
    .com      { color: green; }
    .regexp   { color: maroon; }
    .string   { color: teal; }
    .keywords { color: blue; }
    .global   { color: #008; }
    .numbers  { color: #880; }
    .comm     { color: green; }
    .tag      { color: blue; }
    .entity   { color: blue; }
    .string   { color: teal; }
    .aname    { color: maroon; }
    .avalue   { color: maroon; }
    .jquery   { color: #00a; }
    .plugin   { color: red; }
    
    
    </style>
    
    
    
    
    
    
    <script src="http://jquery.bassistance.de/validate/lib/jquery.js" type="text/javascript"></script>
    <script src="http://jquery.bassistance.de/validate/jquery.validate.js" type="text/javascript"></script>
    	
    	
    	
    	<script type="text/javascript">
    		$.metadata.setType("attr", "validate");
    		$(document).ready(function() {
    			$("#form1").validate();
    			$("#selecttest").validate();
    		});
    	</script>
    	
    	
    	<style type="text/css">
    	.block { display: block; }
    	form.cmxform label.error { display: none; }	
    	</style>
    
    
    
    	<script type="text/javascript">
    		$(document).ready(function(){
    		
    		 $(function() {
    		   $("[name=toggler]").click(function() {
    		     $('.toHide').hide();
    		     $("#blk-" + $(this).val()).toggle();
    		   });
    		 });
    		
    
    		});	
    		
    		
    		$( function()
    		{
    			var $radios = $( 'input:radio[name=texting_dur_school], input:radio[name=texting_out_school]' ), $toggledTable = $( '#part2_question' );
    			$radios
    				.click( function()
    				{
    					if( $radios.filter( ':checked[value="Yes"]' ).length )
    					{
    						$toggledTable.show();
    					}
    					else
    					{
    						$toggledTable.hide();
    					}
    				} );
    				
    				
    				
    				
    	// validate signup form on keyup and submit
    	var validator = $("#signupform").validate({
    		rules: {
    			homeroom: "required",
    			cafeteria: "required",
    			academic_class: "required",
    			before_school: "required",
    			bus: "required",
    			after_school: "required",
    			gym: "required",
    			dances: "required",
    			hallway: "required",
    			sporting_events: "required",
    			bathroom: "required",
    			telephone: "required",
    			texting_dur_school: "required",
    			texting_out_school: "required",
    			Facebook: "required",
    			Twitter: "required",
    			IMing: "required",
    			Email: "required",
    			Myspace: "required",
    			Texting: "required",
    			Online_Gaming: "required"
    		},
    		messages: {
    			homeroom: "&nbsp;",
    			cafeteria: "&nbsp;",
    			academic_class: "&nbsp;",
    			before_school: "&nbsp;",
    			bus: "&nbsp;",
    			after_school: "&nbsp;",
    			gym: "&nbsp;",
    			dances: "&nbsp;",
    			hallway: "&nbsp;",
    			sporting_events: "&nbsp;",
    			bathroom: "&nbsp;",
    			telephone: "&nbsp;",
    			texting_dur_school: "&nbsp;",
    			texting_out_school: "&nbsp;",
    			Facebook: "&nbsp;",
    			Twitter: "&nbsp;",
    			IMing: "&nbsp;",
    			Email: "&nbsp;",
    			Myspace: "&nbsp;",
    			Texting: "&nbsp;",
    			Online_Gaming: "&nbsp;"
    		
    		},
    		// the errorPlacement has to take the table layout into account
    		errorPlacement: function(error, element) {
    			if ( element.is(":radio") )
    				error.appendTo( element.parent().next().next() );
    			else if ( element.is(":checkbox") )
    				error.appendTo ( element.next() );
    			else
    				error.appendTo( element.parent().next() );
    		},
    		// specifying a submitHandler prevents the default submit, good for the demo
    		submitHandler: function() {
    			alert("submitted!");
    		},
    		// set this class to error-labels to indicate valid fields
    		success: function(label) {
    			// set &nbsp; as text for IE
    			label.html("&nbsp;").addClass("checked");
    		}
    	});
    
    				
    		} );
    	</script>
    	
    	
    </head>
    <body>
    
    
    
    <form id="signupform" autocomplete="off" method="get" action="">
    
    	<!-- This table visible on page load -->
    	<table width="100%" border="1" cellpadding="0" cellspacing="0">
    		<tr>
    		  	<td>
    				<table width="100%">
    				  <tr>
    					<td><span><strong>2a. Where has it happened?</strong></span></td>
    					<td><strong>Yes</strong></td>
    					<td><strong>No</strong></td>
    					<td></td>
    				  </tr>
    				  <tr>
    					<td bgcolor="#ddeeee">homeroom </td>
    					<td bgcolor="#ddeeee"><input type="radio" name="homeroom" value="Yes" /></td>
    					<td bgcolor="#ddeeee"><input type="radio" name="homeroom" value="No" /></td>
    					<td bgcolor="#ddeeee"></td>
    				  </tr>
    				  <tr>
    					<td>cafeteria</td>
    					<td><input type="radio" name="cafeteria" value="Yes" /></td>
    					<td><input type="radio" name="cafeteria" value="No" /></td>
    					<td></td>
    				  </tr>
    				  <tr>
    					<td bgcolor="#ddeeee">academic class</td>
    					<td bgcolor="#ddeeee"><input type="radio" name="academic_class" value="Yes" /></td>
    					<td bgcolor="#ddeeee"><input type="radio" name="academic_class" value="No" /></td>
    					<td bgcolor="#ddeeee"></td>
    				  </tr>
    				  <tr>
    					<td>before school</td>
    					<td><input type="radio" name="before_school" value="Yes" /></td>
    					<td><input type="radio" name="before_school" value="No" /></td>
    					<td></td>
    				  </tr>
    				  <tr>
    					<td bgcolor="#ddeeee">bus</td>
    					<td bgcolor="#ddeeee"><input type="radio" name="bus" value="Yes" /></td>
    					<td bgcolor="#ddeeee"><input type="radio" name="bus" value="No" /></td>
    					<td bgcolor="#ddeeee"></td>
    				  </tr>
    				  <tr>
    					<td>after school</td>
    					<td><input type="radio" name="after_school" value="Yes" /></td>
    					<td><input type="radio" name="after_school" value="No" /></td>
    					<td></td>
    				  </tr>
    				  <tr>
    					<td bgcolor="#ddeeee">gym</td>
    					<td bgcolor="#ddeeee"><input type="radio" name="gym" value="Yes" /></td>
    					<td bgcolor="#ddeeee"><input type="radio" name="gym" value="No" /></td>
    					<td bgcolor="#ddeeee"></td>
    				  </tr>
    				  <tr>
    					<td>dances</td>
    					<td><input type="radio" name="dances" value="Yes" /></td>
    					<td><input type="radio" name="dances" value="No" /></td>
    					<td></td>
    				  </tr>
    				  <tr>
    					<td bgcolor="#ddeeee">hallway</td>
    					<td bgcolor="#ddeeee"><input type="radio" name="hallway" value="Yes" /></td>
    					<td bgcolor="#ddeeee"><input type="radio" name="hallway" value="No" /></td>
    					<td bgcolor="#ddeeee"></td>
    				  </tr>
    				  <tr>
    					<td>sporting events</td>
    					<td><input type="radio" name="sporting_events" value="Yes" /></td>
    					<td><input type="radio" name="sporting_events" value="No" /></td>
    					<td></td>
    				  </tr>
    				  <tr>
    					<td bgcolor="#ddeeee">bathroom</td>
    					<td bgcolor="#ddeeee"><input type="radio" name="bathroom" value="Yes" /></td>
    					<td bgcolor="#ddeeee"><input type="radio" name="bathroom" value="No" /></td>
    					<td bgcolor="#ddeeee"></td>
    				  </tr>
    				  <tr>
    					<td>telephone</td>
    					<td><input type="radio" name="telephone" value="Yes" /></td>
    					<td><input type="radio" name="telephone" value="No" /></td>
    					<td></td>
    				  </tr>
    				  <tr>
    					<td bgcolor="#FFE5E7">online/texting during school</td>
    					<td bgcolor="#FFE5E7"><input type="radio" name="texting_dur_school" value="Yes" /></td>
    					<td bgcolor="#FFE5E7"><input type="radio" name="texting_dur_school" value="No" /></td>
    					<td bgcolor="#FFE5E7"></td>
    				  </tr>
    				  <tr>
    					<td bgcolor="#FFF49A">online/texting outside of school</td>
    					<td bgcolor="#FFF49A"><input type="radio" name="texting_out_school" value="Yes" /></td>
    					<td bgcolor="#FFF49A"><input type="radio" name="texting_out_school" value="No" /></td>
    					<td bgcolor="#FFF49A"></td>
    				  </tr>
    				</table>
    			</td>
    		</tr>
    	</table>
    
    
    
    	<br />
    	<br />
    				  
    				  
    	<!-- This table hidden on page load -->
    	<div id="part2_question" class="current" style="display:none">
    	
    		<table width="100%" border="1" cellpadding="0" cellspacing="0">
    			<tr>
    				<td>
    					<table width="100%">
    							<tr>
    								<td><strong>2b. Identify the online/texting programs where it occurred.</strong></td>
    								<td><strong>Yes</strong></td>
    								<td><strong>No</strong></td>
    							</tr>
    							<tr>
    								<td bgcolor="#ddeeee">Facebook</td>
    								<td bgcolor="#ddeeee"><input type="radio" name="Facebook" value="Yes" /></td>
    								<td bgcolor="#ddeeee"><input type="radio" name="Facebook" value="No" /></td>
    								<td bgcolor="#ddeeee"></td>
    							</tr>
    							<tr>
    								<td>Twitter</td>
    								<td><input type="radio" name="Twitter" value="Yes" /></td>
    								<td><input type="radio" name="Twitter" value="No" /></td>
    								<td></td>
    							</tr>
    							<tr>
    								<td bgcolor="#ddeeee">IMing</td>
    								<td bgcolor="#ddeeee"><input type="radio" name="IMing" value="Yes" /></td>
    								<td bgcolor="#ddeeee"><input type="radio" name="IMing" value="No" /></td>
    								<td bgcolor="#ddeeee"></td>
    							</tr>
    							<tr>
    								<td>Email</td>
    								<td><input type="radio" name="Email" value="Yes" /></td>
    								<td><input type="radio" name="Email" value="No" /></td>
    								<td></td>
    							</tr>
    							<tr>
    								<td bgcolor="#ddeeee">Myspace</td>
    								<td bgcolor="#ddeeee"><input type="radio" name="Myspace" value="Yes" /></td>
    								<td bgcolor="#ddeeee"><input type="radio" name="Myspace" value="No" /></td>
    								<td bgcolor="#ddeeee"></td>
    							</tr>
    							<tr>
    								<td>Texting</td>
    								<td><input type="radio" name="Texting" value="Yes" /></td>
    								<td><input type="radio" name="Texting" value="No" /></td>
    								<td></td>
    							</tr>
    							<tr>
    								<td bgcolor="#ddeeee">Online Gaming</td>
    								<td bgcolor="#ddeeee"><input type="radio" name="Online_Gaming" value="Yes" /></td>
    								<td bgcolor="#ddeeee"><input type="radio" name="Online_Gaming" value="No" /></td>
    								<td bgcolor="#ddeeee"></td>
    							</tr>
    							<tr>
    								<td colspan="3">Other: 
    									&nbsp; 
    									<input type='text' name="other2b" value='' class='inputPickOneOther' size='50' />
    								</td>
    							</tr>
    					</table>
    				</td>
    			</tr>
    		</table>
    	</div>
    
    
    	<br />
    	<br />
    
    
    	<input id="signupsubmit" name="signup" type="submit" value="Signup" />
    
    
    </form>
    				  
    
    
    </body>
    
    </html>
    
    
    
    Code (markup):
     
    mrfisherman2010, Mar 8, 2011 IP