我遇到了
jQuery validate plugin的问题.我有一组3个单选按钮,如果选择前两个中的任何一个,则在表单上显示用户额外的选择输入,如果选择了第三个,则没有任何反应.
如果他们从单选按钮组中选择选项1或2,我希望用户需要从附加选择输入中选择一些内容.
我已经为第一个选项编写了代码,但它无法正常工作.如果我没有选择任何单选按钮选项,我会得到两个必填字段错误(一个用于单选按钮设置,另一个用于隐藏的选择输入,不应该验证).
select是自定义代码,它有一些jQuery来控制它. jQuery将所选值放入隐藏的输入工资带中
我的代码是:
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"); } } } } });
尽管有条件要求的规则,为什么它始终验证选择输入的任何想法?
解决方法
$(“#job-earnings-salary:checked”)返回一个jQuery对象,它始终是真实的
$("#client-form").validate({ focusInvalid: false,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>