jquery 验证 : Making a field required when a specific option is selected.

Question

感谢您的帮助。我确定有一种简单的方法可以做到这一点，但我无法弄清楚。基本上我需要 jquery 根据 jquery 规则的要求设置某个选择标记，如果选择了另一个具有特定值的标记。

<form action="here" method="post" id="application">

<span class="label">Would you be able to pass a criminal background check?</span>
    <select name="backgroundCheck" id="backgroundCheck">
     <option value="">Please select</option>
     <option id="backgroundYes" value="Yes">Yes</option>
     <option id="backgroundNo" value="No">No</option>
    </select>

(If one selects 'Yes', then this felonies div pops up)

<div id="felonies" style="display: none;">
      <span class="label">Any past felonies on your record?</span><br />
       <select name="backgroundFelonies" id="backgroundFelonies">
         <option value="">Please select</option>
         <option value="Yes">Yes</option>
         <option value="No">No</option>
       </select>
</div>
....

基本上，如果用户无法通过犯罪背景调查，就会询问他们是否有任何重罪。始终要求用户回答犯罪背景调查问题。如果他们对该问题的回答是否定的，重罪问题就会出现，这就是我需要在 jquery 中选择 Felonies 标签的时候。此外，如果用户能够通过犯罪背景调查，我不希望重罪。我可以在 javascript 中执行此操作，但我无法在 jquery 中执行此操作。

下面你会看到我需要激活的注释代码行

<select name="backgroundCheck" id="backgroundCheck"> is 'yes'




$(document).ready(function(){

    jQuery.validator.messages.required = "Please complete the required fields.";

    $("#application").validate({
        errorLabelContainer: "#error-note",
        rules: {
          firstName: "required",
          lastName: "required",
          phone: "required",
          email: "required",
          address1: "required",
          city: "required",
          zip: "required",
          experience: "required",
          yearsExperience: "required",
          transportation: "required",
          legalToWork: "required",

          backgroundCheck: "required",
        //backgroundFelonies: "require",       <------------------ This one
          speakEnglish: "required"

        },

        groups: {
        collecive: "firstName lastName email address1 city zip phone experience   yearsExperience transportation legalToWork speakEnglish backgroundCheck"
        }
    });
  });

这可能很容易做到，但我知道我的看法是错误的。我是 jquery 的新手，我尝试过的所有传统方法都失败了。

谢谢

Answer 1

你可以使用一个返回 true/false 的函数

jQuery(function($) {

  jQuery.validator.messages.required = "Please complete the required fields.";

  $("#application").validate({
    errorLabelContainer: "#error-note",
    rules: {
      firstName: "required",
      lastName: "required",
      phone: "required",
      email: "required",
      address1: "required",
      city: "required",
      zip: "required",
      experience: "required",
      yearsExperience: "required",
      transportation: "required",
      legalToWork: "required",

      backgroundCheck: "required",
      backgroundFelonies: {
        required: function() {
          return $('#backgroundCheck').val() == 'Yes';
        }
      }, //       <------------------ This one
      speakEnglish: "required"

    },

    groups: {
      collecive: "firstName lastName email address1 city zip phone experience   yearsExperience transportation legalToWork speakEnglish backgroundCheck"
    }
  });
});

<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="application" method="post" action="">
  <div>
    <span class="label">Would you be able to pass a criminal background check?</span>
    <select name="backgroundCheck" id="backgroundCheck">
      <option value="">Please select</option>
      <option id="backgroundYes" value="Yes">Yes</option>
      <option id="backgroundNo" value="No">No</option>
    </select>
  </div>

  <div id="felonies">
    <span class="label">Any past felonies on your record?</span>
    <br />
    <select name="backgroundFelonies" id="backgroundFelonies">
      <option value="">Please select</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  <input type="submit" class="button" value="Submit" />
</form>