title: jQuery Validate plugin conditional required field
body: <p>I'm having an issue with the <a href="http://jqueryvalidation.org/" rel="noreferrer">jQuery validate plugin</a>. I have a set of <strong>3</strong> radio buttons, if either of the first two are selected, the user is shown an extra select input on the form, if the third is selected, nothing happens.</p>
  
  <p>I want to user to be <strong>required</strong> to select something from the additional select input if they choose either option 1 or 2 from the radio button set.</p>
  
  <p>I've written the code for the first option, but it's not working correctly. If I select none of the radio button options, I get two required field errors (one for the radio button set, and another for the hidden select input that shouldn't be validating yet).</p>
  
  <p>The select is custom code that has some jQuery to allow control of it. The jQuery puts the selected value into the hidden input <code>salaryband</code></p>
  
  <p>The code I have is:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- radio button select --&gt;
  &lt;label&gt;Earnings&lt;/label&gt;
  &lt;div class="multiple-select earnings-wrapper clearfix"&gt;
      &lt;div class="third"&gt;
          &lt;input id="job-earnings-salary" class="trigger" data-type="salary"
          type="radio" name="jobearnings" value="salary" required="true"&gt;
          &lt;label for="job-earnings-salary"&gt;Salary&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="third"&gt;
          &lt;input id="job-earnings-hourly" class="trigger" data-type="hourly"
          type="radio" name="jobearnings" value="hourly" required="true"&gt;
          &lt;label for="job-earnings-hourly"&gt;Hourly&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="third"&gt;
          &lt;input id="job-earnings-unspecified" class="trigger" data-type="none"
          type="radio" name="jobearnings" value="unspecified" required="true"&gt;
          &lt;label for="job-earnings-unspecified"&gt;Unspecified&lt;/label&gt;
      &lt;/div&gt;
      &lt;input type="hidden" name="earningstype" id="earnings-type" class="trigger-input" value=""&gt;
  &lt;/div&gt;
  
  
  &lt;!-- First select box --&gt;
  &lt;label for="salaryband"&gt;Salary Band&lt;/label&gt;
  &lt;div class="select"&gt;
      &lt;span class="select-default"&gt;Select Salary Band&lt;/span&gt;
      &lt;div class="options"&gt;
      &lt;?php
          $args = array(
              'hide_empty' =&gt; false,
              'orderby' =&gt; 'ID',
          );
          $salaries = get_terms('salaries', $args);
          foreach( $salaries as $salary ) :
              echo '&lt;span data-value="'.$salary-&gt;term_id.'"&gt;'.$salary-&gt;name.'&lt;/span&gt;';
          endforeach;
      ?&gt;
      &lt;/div&gt;
      &lt;input type="hidden" name="salaryband" id="salaryband" class="salary-band" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Validation jQuery:</strong></p>
  
  <pre><code>$("#client-form").validate({
      focusInvalid: false,
      ignore: [],
      rules: {
          salaryband: {
              required: {
                  depends: function(element) {
                      return $("#job-earnings-salary:checked");
                  }
              }
          }
      }
  });
  </code></pre>
  
  <p>Any ideas as to why it's always validating the select input despite the conditional required rule?</p>