jquery验证:选择特定选项时需要输入字段。

时间:2014-12-19 02:46:38

标签: jquery

感谢您的帮助。我确信有一种简单的方法可以做到这一点,但我无法弄明白。基本上我需要jquery来设置jquery规则中所需的某个select标签,如果选择另一个具有特定值的标签。

<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很新,我尝试过的所有传统方法都失败了。

由于

1 个答案:

答案 0 :(得分:1)

您可以使用将返回true / false

的函数

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