jQuery Подтвердить плагин Обязательное поле

Question

У меня проблема с jQuery validate plugin. У меня есть набор радиокнопок, если выбрано одно из первых двух, пользователю показан дополнительный вход для выбора в форме, если третья выбрана, ничего не происходит.

Я хочу, чтобы пользователь был , потребовал, чтобы выбрать что-то из дополнительного входа выбора, если они выбрали один из вариантов 1 или 2 из установленного переключателя.

Я написал код для первого варианта, но он работает неправильно. Если я не выберу ни одну из параметров переключателя, я получаю две обязательные полевые ошибки (один для набора радиокнопки, а другой для скрытого ввода, который еще не должен проверяться).

Выбор - это настраиваемый код, который имеет некоторый jQuery, позволяющий управлять им. JQuery помещает выбранное значение в скрытый вход salaryband

код у меня есть:

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> 

Проверка JQuery:

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

Любые идеи почему он всегда проверяет выбранный вход, несмотря на то, что co требуемое правило?

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>