form validation with jquery but not on hidden elements

form validation with jquery but not on hidden elements

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.

My page is below.



  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <title>Survey</title>

  10. <style type="text/css">

  12. /* Signup form */

  14. #signupform table {
  15.   border-spacing: 0px;
  16.   border-collapse: collapse;
  17.   empty-cells: show;
  18. }

  20. #signupform .label {
  21.   padding-top: 2px;
  22.   padding-right: 8px;
  23.   vertical-align: top;
  24.   text-align: right;
  25.   width: 125px;
  26.   white-space: nowrap;
  27. }

  29. #signupform .field {
  30.   padding-bottom: 10px;
  31.   white-space: nowrap;
  32. }

  34. #signupform .status {
  35.   padding-top: 2px;
  36.   padding-left: 8px;
  37.   vertical-align: top;
  38.   width: 246px;
  39.   white-space: nowrap;
  40. }

  42. #signupform .textfield {
  43.   width: 150px;
  44. }

  46. #signupform label.error {
  47.   background:url("http://jquery.bassistance.de/validate/demo/images/unchecked.gif") no-repeat 0px 0px;

  49.   padding-left: 16px;

  51.   padding-bottom: 2px;

  53.   font-weight: bold;

  55.   color: #EA5200;
  56. }

  58. #signupform label.checked {
  59.   background:url("http://jquery.bassistance.de/validate/demo/images/checked.gif") no-repeat 0px 0px;
  60. }

  62. #signupform .success_msg {
  63.   font-weight: bold;
  64.   color: #0060BF;
  65.   margin-left: 19px;
  66. }

  68. #signupform #dateformatStatus, #signupform #termsStatus {
  69.   margin-left: 6px;
  70. }

  72. #signupform #dateformat_eu {
  73.  vertical-align: middle;
  74. }

  76. #signupform #ldateformat_eu {
  77.   font-weight: normal;
  78.   vertical-align: middle;
  79. }

  81. #signupform #dateformat_am {
  82.   vertical-align: middle;
  83. }

  85. #signupform #ldateformat_am {
  86.   font-weight: normal;
  87.   vertical-align: middle;
  88. }

  90. #signupform #termswrap {
  91.   float: left;
  92. }

  94. #signupform #terms {
  95.   vertical-align: middle;
  96.   float: left;
  97.   display: block;
  98.   margin-right: 5px;
  99. }

  101. #signupform #lterms {
  102.   font-weight: normal;
  103.   vertical-align: middle;
  104.   float: left;
  105.   display: block;
  106.   width: 350px;
  107.   white-space: normal;
  108. }

  110. #signupform #lsignupsubmit {
  111.   visibility: hidden;
  112. }


  115. .jscom, .mix htcom   { color: #4040c2; }
  116. .com      { color: green; }
  117. .regexp   { color: maroon; }
  118. .string   { color: teal; }
  119. .keywords { color: blue; }
  120. .global   { color: #008; }
  121. .numbers  { color: #880; }
  122. .comm     { color: green; }
  123. .tag      { color: blue; }
  124. .entity   { color: blue; }
  125. .string   { color: teal; }
  126. .aname    { color: maroon; }
  127. .avalue   { color: maroon; }
  128. .jquery   { color: #00a; }
  129. .plugin   { color: red; }


  132. </style>






  139. <script src="http://jquery.bassistance.de/validate/lib/jquery.js" type="text/javascript"></script>
  140. <script src="http://jquery.bassistance.de/validate/jquery.validate.js" type="text/javascript"></script>
  144. <script type="text/javascript">
  145. $.metadata.setType("attr", "validate");
  146. $(document).ready(function() {
  147. $("#form1").validate();
  148. $("#selecttest").validate();
  149. });
  150. </script>
  153. <style type="text/css">
  154. .block { display: block; }
  155. form.cmxform label.error { display: none; }
  156. </style>



  160. <script type="text/javascript">
  161. $(document).ready(function(){
  163. $(function() {
  164.   $("[name=toggler]").click(function() {
  165.     $('.toHide').hide();
  166.     $("#blk-" + $(this).val()).toggle();
  167.   });
  168. });

  171. });
  174. $( function()
  175. {
  176. var $radios = $( 'input:radio[name=texting_dur_school], input:radio[name=texting_out_school]' ), $toggledTable = $( '#part2_question' );
  177. $radios
  178. .click( function()
  179. {
  180. if( $radios.filter( ':checked[value="Yes"]' ).length )
  181. {
  182. $toggledTable.show();
  183. }
  184. else
  185. {
  186. $toggledTable.hide();
  187. }
  188. } );
  193. // validate signup form on keyup and submit
  194. var validator = $("#signupform").validate({
  195. rules: {
  196. homeroom: "required",
  197. cafeteria: "required",
  198. academic_class: "required",
  199. before_school: "required",
  200. bus: "required",
  201. after_school: "required",
  202. gym: "required",
  203. dances: "required",
  204. hallway: "required",
  205. sporting_events: "required",
  206. bathroom: "required",
  207. telephone: "required",
  208. texting_dur_school: "required",
  209. texting_out_school: "required",
  210. Facebook: "required",
  211. Twitter: "required",
  212. IMing: "required",
  213. Email: "required",
  214. Myspace: "required",
  215. Texting: "required",
  216. Online_Gaming: "required"
  217. },
  218. messages: {
  219. homeroom: "&nbsp;",
  220. cafeteria: "&nbsp;",
  221. academic_class: "&nbsp;",
  222. before_school: "&nbsp;",
  223. bus: "&nbsp;",
  224. after_school: "&nbsp;",
  225. gym: "&nbsp;",
  226. dances: "&nbsp;",
  227. hallway: "&nbsp;",
  228. sporting_events: "&nbsp;",
  229. bathroom: "&nbsp;",
  230. telephone: "&nbsp;",
  231. texting_dur_school: "&nbsp;",
  232. texting_out_school: "&nbsp;",
  233. Facebook: "&nbsp;",
  234. Twitter: "&nbsp;",
  235. IMing: "&nbsp;",
  236. Email: "&nbsp;",
  237. Myspace: "&nbsp;",
  238. Texting: "&nbsp;",
  239. Online_Gaming: "&nbsp;"
  241. },
  242. // the errorPlacement has to take the table layout into account
  243. errorPlacement: function(error, element) {
  244. if ( element.is(":radio") )
  245. error.appendTo( element.parent().next().next() );
  246. else if ( element.is(":checkbox") )
  247. error.appendTo ( element.next() );
  248. else
  249. error.appendTo( element.parent().next() );
  250. },
  251. // specifying a submitHandler prevents the default submit, good for the demo
  252. submitHandler: function() {
  253. alert("submitted!");
  254. },
  255. // set this class to error-labels to indicate valid fields
  256. success: function(label) {
  257. // set &nbsp; as text for IE
  258. label.html("&nbsp;").addClass("checked");
  259. }
  260. });

  263. } );
  264. </script>
  267. </head>
  268. <body>



  272. <form id="signupform" autocomplete="off" method="get" action="">

  274. <!-- This table visible on page load -->
  275. <table width="100%" border="1" cellpadding="0" cellspacing="0">
  276. <tr>
  277.   <td>
  278. <table width="100%">
  279.  <tr>
  280. <td><span><strong>2a. Where has it happened?</strong></span></td>
  281. <td><strong>Yes</strong></td>
  282. <td><strong>No</strong></td>
  283. <td></td>
  284.  </tr>
  285.  <tr>
  286. <td bgcolor="#ddeeee">homeroom </td>
  287. <td bgcolor="#ddeeee"><input type="radio" name="homeroom" value="Yes" /></td>
  288. <td bgcolor="#ddeeee"><input type="radio" name="homeroom" value="No" /></td>
  289. <td bgcolor="#ddeeee"></td>
  290.  </tr>
  291.  <tr>
  292. <td>cafeteria</td>
  293. <td><input type="radio" name="cafeteria" value="Yes" /></td>
  294. <td><input type="radio" name="cafeteria" value="No" /></td>
  295. <td></td>
  296.  </tr>
  297.  <tr>
  298. <td bgcolor="#ddeeee">academic class</td>
  299. <td bgcolor="#ddeeee"><input type="radio" name="academic_class" value="Yes" /></td>
  300. <td bgcolor="#ddeeee"><input type="radio" name="academic_class" value="No" /></td>
  301. <td bgcolor="#ddeeee"></td>
  302.  </tr>
  303.  <tr>
  304. <td>before school</td>
  305. <td><input type="radio" name="before_school" value="Yes" /></td>
  306. <td><input type="radio" name="before_school" value="No" /></td>
  307. <td></td>
  308.  </tr>
  309.  <tr>
  310. <td bgcolor="#ddeeee">bus</td>
  311. <td bgcolor="#ddeeee"><input type="radio" name="bus" value="Yes" /></td>
  312. <td bgcolor="#ddeeee"><input type="radio" name="bus" value="No" /></td>
  313. <td bgcolor="#ddeeee"></td>
  314.  </tr>
  315.  <tr>
  316. <td>after school</td>
  317. <td><input type="radio" name="after_school" value="Yes" /></td>
  318. <td><input type="radio" name="after_school" value="No" /></td>
  319. <td></td>
  320.  </tr>
  321.  <tr>
  322. <td bgcolor="#ddeeee">gym</td>
  323. <td bgcolor="#ddeeee"><input type="radio" name="gym" value="Yes" /></td>
  324. <td bgcolor="#ddeeee"><input type="radio" name="gym" value="No" /></td>
  325. <td bgcolor="#ddeeee"></td>
  326.  </tr>
  327.  <tr>
  328. <td>dances</td>
  329. <td><input type="radio" name="dances" value="Yes" /></td>
  330. <td><input type="radio" name="dances" value="No" /></td>
  331. <td></td>
  332.  </tr>
  333.  <tr>
  334. <td bgcolor="#ddeeee">hallway</td>
  335. <td bgcolor="#ddeeee"><input type="radio" name="hallway" value="Yes" /></td>
  336. <td bgcolor="#ddeeee"><input type="radio" name="hallway" value="No" /></td>
  337. <td bgcolor="#ddeeee"></td>
  338.  </tr>
  339.  <tr>
  340. <td>sporting events</td>
  341. <td><input type="radio" name="sporting_events" value="Yes" /></td>
  342. <td><input type="radio" name="sporting_events" value="No" /></td>
  343. <td></td>
  344.  </tr>
  345.  <tr>
  346. <td bgcolor="#ddeeee">bathroom</td>
  347. <td bgcolor="#ddeeee"><input type="radio" name="bathroom" value="Yes" /></td>
  348. <td bgcolor="#ddeeee"><input type="radio" name="bathroom" value="No" /></td>
  349. <td bgcolor="#ddeeee"></td>
  350.  </tr>
  351.  <tr>
  352. <td>telephone</td>
  353. <td><input type="radio" name="telephone" value="Yes" /></td>
  354. <td><input type="radio" name="telephone" value="No" /></td>
  355. <td></td>
  356.  </tr>
  357.  <tr>
  358. <td bgcolor="#FFE5E7">online/texting during school</td>
  359. <td bgcolor="#FFE5E7"><input type="radio" name="texting_dur_school" value="Yes" /></td>
  360. <td bgcolor="#FFE5E7"><input type="radio" name="texting_dur_school" value="No" /></td>
  361. <td bgcolor="#FFE5E7"></td>
  362.  </tr>
  363.  <tr>
  364. <td bgcolor="#FFF49A">online/texting outside of school</td>
  365. <td bgcolor="#FFF49A"><input type="radio" name="texting_out_school" value="Yes" /></td>
  366. <td bgcolor="#FFF49A"><input type="radio" name="texting_out_school" value="No" /></td>
  367. <td bgcolor="#FFF49A"></td>
  368.  </tr>
  369. </table>
  370. </td>
  371. </tr>
  372. </table>



  376. <br />
  377. <br />
  378.  
  379.  
  380. <!-- This table hidden on page load -->
  381. <div id="part2_question" class="current" style="display:none">
  383. <table width="100%" border="1" cellpadding="0" cellspacing="0">
  384. <tr>
  385. <td>
  386. <table width="100%">
  387. <tr>
  388. <td><strong>2b. Identify the online/texting programs where it occurred.</strong></td>
  389. <td><strong>Yes</strong></td>
  390. <td><strong>No</strong></td>
  391. </tr>
  392. <tr>
  393. <td bgcolor="#ddeeee">Facebook</td>
  394. <td bgcolor="#ddeeee"><input type="radio" name="Facebook" value="Yes" /></td>
  395. <td bgcolor="#ddeeee"><input type="radio" name="Facebook" value="No" /></td>
  396. <td bgcolor="#ddeeee"></td>
  397. </tr>
  398. <tr>
  399. <td>Twitter</td>
  400. <td><input type="radio" name="Twitter" value="Yes" /></td>
  401. <td><input type="radio" name="Twitter" value="No" /></td>
  402. <td></td>
  403. </tr>
  404. <tr>
  405. <td bgcolor="#ddeeee">IMing</td>
  406. <td bgcolor="#ddeeee"><input type="radio" name="IMing" value="Yes" /></td>
  407. <td bgcolor="#ddeeee"><input type="radio" name="IMing" value="No" /></td>
  408. <td bgcolor="#ddeeee"></td>
  409. </tr>
  410. <tr>
  411. <td>Email</td>
  412. <td><input type="radio" name="Email" value="Yes" /></td>
  413. <td><input type="radio" name="Email" value="No" /></td>
  414. <td></td>
  415. </tr>
  416. <tr>
  417. <td bgcolor="#ddeeee">Myspace</td>
  418. <td bgcolor="#ddeeee"><input type="radio" name="Myspace" value="Yes" /></td>
  419. <td bgcolor="#ddeeee"><input type="radio" name="Myspace" value="No" /></td>
  420. <td bgcolor="#ddeeee"></td>
  421. </tr>
  422. <tr>
  423. <td>Texting</td>
  424. <td><input type="radio" name="Texting" value="Yes" /></td>
  425. <td><input type="radio" name="Texting" value="No" /></td>
  426. <td></td>
  427. </tr>
  428. <tr>
  429. <td bgcolor="#ddeeee">Online Gaming</td>
  430. <td bgcolor="#ddeeee"><input type="radio" name="Online_Gaming" value="Yes" /></td>
  431. <td bgcolor="#ddeeee"><input type="radio" name="Online_Gaming" value="No" /></td>
  432. <td bgcolor="#ddeeee"></td>
  433. </tr>
  434. <tr>
  435. <td colspan="3">Other: 
  436. &nbsp; 
  437. <input type='text' name="other2b" value='' class='inputPickOneOther' size='50' />
  438. </td>
  439. </tr>
  440. </table>
  441. </td>
  442. </tr>
  443. </table>
  444. </div>


  447. <br />
  448. <br />


  451. <input id="signupsubmit" name="signup" type="submit" value="Signup" />


  454. </form>
  455.  


  458. </body>

  460. </html>