jQuery मान्य प्लगइन सशर्त आवश्यक फ़ील्ड

Question

मुझे jQuery validate plugin के साथ कोई समस्या है। मेरे पास रेडियो बटन का एक सेट है, यदि पहले दो में से कोई भी चुना गया है, तो उपयोगकर्ता को फॉर्म पर एक अतिरिक्त चयन इनपुट दिखाया गया है, यदि तीसरा चुना गया है, तो कुछ भी नहीं होता है।

मैं उपयोगकर्ता को को अतिरिक्त चयन इनपुट से कुछ चुनने के लिए चाहता हूं यदि वे रेडियो बटन सेट से विकल्प 1 या 2 चुनते हैं।

मैंने पहले विकल्प के लिए कोड लिखा है, लेकिन यह सही तरीके से काम नहीं कर रहा है। यदि मैं रेडियो बटन विकल्पों में से कोई भी नहीं चुनता, तो मुझे दो आवश्यक फ़ील्ड त्रुटियां मिलती हैं (रेडियो बटन सेट के लिए एक, और दूसरा छुपा चयन इनपुट जो अभी तक मान्य नहीं होना चाहिए)।

चयन कस्टम कोड है जिसमें कुछ jQuery हैं जो इसे नियंत्रित करने की अनुमति देते हैं। jQuery छिपा इनपुट में चयनित मान डालता salaryband

कोड रहा है:

एचटीएमएल

<!-- 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") एक jQuery वस्तु जो हमेशा 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>