title: jquery validate form input if certain check boxes are checked
body: <p>I have a multipart form that takes basic user information at the beginning with some jquery.validate error checking to see if the fields have been filled in and the email address is valid.</p>
  
  <p>Below that there is a series of check boxes (type_of_request) for new accounts, delete accounts, new software etc which show/hide those form elements as they are checked/unchecked.</p>
  
  <p>I would like to validate the required sections on the form ONLY if the corressponding type_of_request item has been checked.</p>
  
  <hr>
  
  <p>Update information</p>
  
  <hr>
  
  <p>That's a great solution but seems to make all of the children of the selected section required.</p>
  
  <p>A typical scenario will be both the email and other checkbox in the type_request has been selected:</p>
  
  <pre><code>   &lt;div id="email" style="display: block;"&gt; // shown because other has been selected in the type request
       &lt;input id="email_new_account" class="sq-form-field" type="checkbox" value="0" name="q4836:q1"/&gt; // not required
       &lt;input id="email_new_account_name" class="sq-form-field" type="text" name="q4836:q2"/&gt; // if email_new_account checked then make required
       &lt;input id="email_new_account_access" class="sq-form-field" type="text" name="q4836:q2"/&gt; // if email_new_account checked then make required
       &lt;input id="email_new_account_manager" class="sq-form-field" type="text" name="q4836:q3"/&gt; // if email_new_account checked then make required
  
       &lt;input id="email_add_remove_access" class="sq-form-field" type="checkbox" value="0" name="q4837:q1"/&gt; // not required
       &lt;input id="email_add_remove_account_name" class="sq-form-field" type="text" name="q4837:q2"/&gt; // if email_add_remove_access checked then make required
       &lt;input id="email_add_access" class="sq-form-field" type="text" name="q4836:q2"/&gt; // if email_add_remove_access checked then make required
       &lt;input id="email_remove_access" class="sq-form-field" type="text" name="q4837:q3"/&gt; // if email_add_remove_access checked then make required
     &lt;/div&gt;
     &lt;div id="other" style="display: block;"&gt; // shown because other has been selected in the type request
       &lt;input id="other_describe_request" class="sq-form-field" type="text" name="q4838:q1"/&gt; // required because #other was checked in type request
       &lt;input id="other_request_justification" class="sq-form-field" type="text" name="q48387:q2"/&gt; // required because #other was checked in type request
     &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Further Reading</p>
  
  <hr>
  
  <p>I have reviewed this even further and found that the following can be added to the class of the input items</p>
  
  <pre><code>class="{required:true, messages:{required:'Please enter 
  your email address'}}"
  </code></pre>
  
  <p>or</p>
  
  <pre><code>class="{required:true, email:true, messages:{required:'Please enter 
  your email address', email:'Please enter a valid email address'}}"
  </code></pre>
  
  <p>but when I add </p>
  
  <pre><code>class="{required:'input[@name=other]:checked'}" 
  </code></pre>
  
  <p>which was described on the <a href="http://jquery.bassistance.de/api-browser/plugins.html#jQueryvalidatormethodsrequiredStringElementBooleanStringFunction" rel="nofollow noreferrer">http://jquery.bassistance.de</a> site, it doesn't work.  Do I need to change the syntax to get this working?</p>