jquery驗證：在選擇特定選項時創建一個字段。

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函數/假

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>