jQuery Validate plugin conditional required field

Question

I'm having an issue with the jQuery validate plugin. I have a set of 3 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.

I want to user to be required to select something from the additional select input if they choose either option 1 or 2 from the radio button set.

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).

The select is custom code that has some jQuery to allow control of it. The jQuery puts the selected value into the hidden input salaryband

The code I have is:

HTML

<!-- radio button select -->
<label>Earnings</label>
<div class="multiple-select earnings-wrapper clearfix">
    <div class="third">
        <input id="job-earnings-salary" class="trigger" data-type="salary"
        type="radio" name="jobearnings" value="salary" required="true">
        <label for="job-earnings-salary">Salary</label>
    </div>
    <div class="third">
        <input id="job-earnings-hourly" class="trigger" data-type="hourly"
        type="radio" name="jobearnings" value="hourly" required="true">
        <label for="job-earnings-hourly">Hourly</label>
    </div>
    <div class="third">
        <input id="job-earnings-unspecified" class="trigger" data-type="none"
        type="radio" name="jobearnings" value="unspecified" required="true">
        <label for="job-earnings-unspecified">Unspecified</label>
    </div>
    <input type="hidden" name="earningstype" id="earnings-type" class="trigger-input" value="">
</div>


<!-- First select box -->
<label for="salaryband">Salary Band</label>
<div class="select">
    <span class="select-default">Select Salary Band</span>
    <div class="options">
    <?php
        $args = array(
            'hide_empty' => false,
            'orderby' => 'ID',
        );
        $salaries = get_terms('salaries', $args);
        foreach( $salaries as $salary ) :
            echo '<span data-value="'.$salary->term_id.'">'.$salary->name.'</span>';
        endforeach;
    ?>
    </div>
    <input type="hidden" name="salaryband" id="salaryband" class="salary-band" />
</div>

Validation jQuery:

$("#client-form").validate({
    focusInvalid: false,
    ignore: [],
    rules: {
        salaryband: {
            required: {
                depends: function(element) {
                    return $("#job-earnings-salary:checked");
                }
            }
        }
    }
});

Any ideas as to why it's always validating the select input despite the conditional required rule?

Answer 1

$("#job-earnings-salary:checked") returns a jQuery object which will always be truthy

$("#client-form").validate({
  focusInvalid: false,
  ignore: [],
  rules: {
    salaryband: {
      required: function(element) {
        return $('#job-earnings-salary').is(':checked')
      }
    }
  }
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>

<form id="client-form">
  <!-- radio button select -->
  <label>Earnings</label>
  <div class="multiple-select earnings-wrapper clearfix">
    <div class="third">
      <input id="job-earnings-salary" class="trigger" data-type="salary" type="radio" name="jobearnings" value="salary" required="true">
      <label for="job-earnings-salary">Salary</label>
    </div>
    <div class="third">
      <input id="job-earnings-hourly" class="trigger" data-type="hourly" type="radio" name="jobearnings" value="hourly" required="true">
      <label for="job-earnings-hourly">Hourly</label>
    </div>
    <div class="third">
      <input id="job-earnings-unspecified" class="trigger" data-type="none" type="radio" name="jobearnings" value="unspecified" required="true">
      <label for="job-earnings-unspecified">Unspecified</label>
    </div>
    <input type="hidden" name="earningstype" id="earnings-type" class="trigger-input" value="">
  </div>


  <!-- First select box -->
  <label for="salaryband">Salary Band</label>
  <div class="select">
    <span class="select-default">Select Salary Band</span>
    <div class="options">
    </div>
    <input type="hidden" name="salaryband" id="salaryband" class="salary-band" />
  </div>
  <input type="submit" class="button" value="Submit" />
</form>