jQuery Eklenti şart koşulu gerekli alan

Question

jQuery validate plugin ile ilgili bir sorun yaşıyorum. radyo düğmelerinden oluşan bir setim var, eğer ilk ikisinden biri seçilirse, kullanıcı formada ekstra bir seçim girişi gösterilir, eğer üçüncü seçilirse hiçbir şey olmuyor.

Kullanıcı, radyo düğmesi setinden 1 veya 2 seçeneğini seçtiğinde ek seçim girişinden bir şey seçmek için gerekli kullanıcı olmak istiyorum.

İlk seçenek için kod yazdım ama doğru çalışmıyor. Radyo düğmesi seçeneklerinden hiçbirini seçmezsem, gerekli iki alan hatası (bir radyo düğmesi seti ve diğeri henüz onaylanmaması gereken gizli seçim girişi için bir tane) alırım.

Seç, kontrolüne izin vermek için bazı jQuery'ye sahip özel koddur. jQuery gizli girişine seçilen değeri koyar salaryband

Ben kodudur:

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> 

Doğrulama jQuery:

$("#client-form").validate({ 
    focusInvalid: false, 
    ignore: [], 
    rules: { 
     salaryband: { 
      required: { 
       depends: function(element) { 
        return $("#job-earnings-salary:checked"); 
       } 
      } 
     } 
    } 
}); 

Herhangi bir fikir olarak Neden her zaman seçime rağmen doğru girdi seçtiğini doğrulamak nditional gerekli kural?

Answer 1

$("#job-earnings-salary:checked") hep

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