jQuery Validate wymagane warunkowe pole wtyczki

Question

Mam problem z jQuery validate plugin. Mam zestaw przycisków radiowych, jeśli jedno z dwóch pierwszych jest zaznaczone, użytkownik jest pokazywany jako dodatkowe wejście w formularzu, jeśli trzeci jest zaznaczony, nic się nie dzieje.

Chcę, aby użytkownik był wymagany, aby wybrać coś z dodatkowego wejścia wyboru, jeśli wybiorą opcję 1 lub 2 z zestawu przycisków radiowych.

Napisałem kod pierwszej opcji, ale nie działa poprawnie. Jeśli nie wybiorę żadnej opcji przycisku radiowego, otrzymam dwa wymagane błędy w polu (jeden dla zestawu przycisków radiowych, a drugi dla ukrytego wejścia wyboru, który nie powinien być jeszcze sprawdzany).

Wybór jest niestandardowym kodem, który ma jQuery, aby umożliwić kontrolę nad nim. JQuery kładzie wybraną wartość do ukrytego wejścia salaryband

Kod mam to:

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> 

Validation jQuery:

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

Wszelkie pomysły jak dlaczego zawsze sprawdza poprawność danych wejściowych mimo współdziałania nditional wymaganą regułę?

Answer 1

$("#job-earnings-salary:checked") zwraca obiekt jQuery, która zawsze będzie 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>