jQuery 验证插件条件必填字段

Question

我遇到了 jQuery validate plugin 的问题。我有一组 3 单选按钮，如果选择前两个中的任何一个，则会在表单上向用户显示额外的选择输入，如果选择第三个，则不会发生任何情况。

如果用户从单选按钮集中选择选项 1 或 2，我希望用户被要求从附加选择输入中选择某些内容。

我已经编写了第一个选项的代码，但它无法正常工作。如果我没有选择任何单选按钮选项，则会收到两个必填字段错误(一个针对单选按钮集，另一个针对不应验证的隐藏选择输入)。

选择是自定义代码，具有一些 jQuery 来允许对其进行控制。 jQuery 将所选值放入隐藏输入 salaryband

我的代码是:

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>

验证 jQuery:

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

关于为什么尽管有条件必需的规则但它总是验证选择输入，有什么想法吗？

Answer 1

$("#job-earnings-salary:checked") 返回一个始终为 true 的 jQuery 对象

$("#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>