jQuery Validate插件的条件必填字段 [英] jQuery Validate plugin conditional required field

问题描述

jQuery验证插件出现问题.我有一组 3 单选按钮，如果选择了前两个按钮之一，则会在表单上向用户显示一个额外的选择输入，如果选择了第三个按钮，则什么也不会发生.

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.

如果希望用户从单选按钮集中选择选项1或2，则需要要求从其他选择输入中选择内容.

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

select是具有一些jQuery的自定义代码，以允许对其进行控制. jQuery将选定的值放入隐藏的输入salaryband

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

我的代码是:

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");
                }
            }
        }
    }
});

关于有条件要求的规则为何总是验证选择输入的任何想法?

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

推荐答案

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

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

这篇关于jQuery Validate插件的条件必填字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！