title: Conditional Validation using JQuery Validation Plugin
body: <p>I have a simple html form that I've added validation to using the JQuery Validation plugin. I have it working for single fields that require a value. I now need to extend that so that if a user answers Yes to a question they must enter something in the Details field, otherwise the Details field can be left blank. I'm using radio buttons to display the Yes/No. Here's my complete html form - I'm not sure where to go from here:</p>
  
  <pre><code>    &lt;script type="text/javascript" charset="utf-8"&gt;
      $.metadata.setType("attr", "validate");
      $(document).ready(function() {
      $("#editRecord").validate();
      });
      &lt;/script&gt;
  
      &lt;style type="text/css"&gt; 
      .block { display: block; }
      form.cmxform label.error { display: none; } 
      &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
              &lt;div id="header"&gt;
                  &lt;h1&gt;
                      Questions&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div id="content"&gt;
                  &lt;h1&gt;
                      Questions Page 1
                  &lt;/h1&gt;
            &lt;/div&gt;
      &lt;div id="content"&gt;
                  &lt;h1&gt;
                  &lt;/h1&gt;
                  &lt;form class="cmxform" method="post" action="editrecord.php"     id="editRecord"&gt;
                  &lt;input type="hidden" name="-action" value="edit"&gt;
                    &lt;h1&gt;
                      Questions                
                    &lt;/h1&gt;
  
            &lt;table width="46%" class="record"&gt;
            &lt;tr&gt;
            &lt;td width="21%" valign="top" class="field_name_left"&gt;&lt;p&gt;Question 1&lt;/p&gt;&lt;/td&gt;
            &lt;td width="15%" valign="top" class="field_data"&gt;
             &lt;label for="Yes"&gt;
              &lt;input type="radio" name="Question1" value="Yes" validate = "required:true" /&gt; Yes
              &lt;/label&gt;
              &lt;label for="No"&gt;
     &lt;input type="radio" name="Question1" value="No" /&gt; No
              &lt;/label&gt;
              &lt;label for="Question1" class="error"&gt;You must answer this question to proceed&lt;/label&gt;
              &lt;/td&gt;
            &lt;td width="64%" valign="top" class="field_data"&gt;&lt;strong&gt;Details:&lt;/strong&gt;
            &lt;textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;/tr&gt;
       &lt;tr&gt;
            &lt;td valign="top" class="field_name_left"&gt;Question 2&lt;/td&gt;
  &lt;td valign="top" class="field_data"&gt;
     &lt;label for="Yes"&gt;
              &lt;input type="radio" name="Question2" value="Yes" validate = "required:true" /&gt; Yes
              &lt;/label&gt;
              &lt;label for="No"&gt;
     &lt;input type="radio" name="Question2" value="No" /&gt; No
              &lt;/label&gt;
              &lt;label for="Question2" class="error"&gt;You must answer this question to proceed&lt;/label&gt;
          &lt;/td&gt;
       &lt;td valign="top" class="field_data"&gt;&lt;strong&gt;Details:&lt;/strong&gt;
                &lt;textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"&gt;&lt;/textarea&gt;           &lt;/td&gt;
     &lt;/tr&gt;
            &lt;tr class="submit_btn"&gt;
                            &lt;td colspan="3"&gt;
                                  &lt;input type="submit" name="-edit" value="Finish"&gt;
                                  &lt;input type="reset" name="reset" value="Reset"&gt;            &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>