Jquery.validate() 带有自定义复选框

Question

我很难让 jQuery.validate() 处理一些自定义样式的复选框，我想知道是否有人能看出我在这里做错了什么。期望的结果是，当我单击“提交”并且未选中任何复选框时，错误应该出现在相应的标签中。不幸的是，什么也没有出现，而且我没有收到任何控制台错误，表明我的代码不正确。

HTML:

<form id="meTaggingForm" class="form-horizontal">
<div class="form-group">
    <label for="gradeRange" class="col-sm-3 control-label">Grade Range<br/><span class="help-block">Check all that apply</span></label>
        <div class="col-sm-9">
        <input type="checkbox" id="myCheckboxK" name="gradeRange"/><label for="myCheckboxK"><i class="ion-ios7-checkmark"></i> K</label>
        <input type="checkbox" id="myCheckbox1" name="gradeRange"/><label for="myCheckbox1"><i class="ion-ios7-checkmark"></i> 1</label>
        <input type="checkbox" id="myCheckbox2" name="gradeRange"/><label for="myCheckbox2"><i class="ion-ios7-checkmark"></i> 2</label>
        <input type="checkbox" id="myCheckbox3" name="gradeRange"/><label for="myCheckbox3"><i class="ion-ios7-checkmark"></i> 3</label>
        <input type="checkbox" id="myCheckbox4" name="gradeRange"/><label for="myCheckbox4"><i class="ion-ios7-checkmark"></i> 4</label>
        <input type="checkbox" id="myCheckbox5" name="gradeRange"/><label for="myCheckbox5"><i class="ion-ios7-checkmark"></i> 5</label>
        <input type="checkbox" id="myCheckbox6" name="gradeRange"/><label for="myCheckbox6"><i class="ion-ios7-checkmark"></i> 6</label>
        <input type="checkbox" id="myCheckbox7" name="gradeRange"/><label for="myCheckbox7"><i class="ion-ios7-checkmark"></i> 7</label>
        <input type="checkbox" id="myCheckbox8" name="gradeRange"/><label for="myCheckbox8"><i class="ion-ios7-checkmark"></i> 8</label>
        <label for="gradeRange" class="error" style="display:none;"></label>
    </div>
</div>
<input type="submit" value="SUBMIT">
</form>

CSS:

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    -webkit-transition: background-color 200ms ease;
    transition: background-color 200ms ease;
    font-size: 13px;
    cursor: pointer;
    border-radius: 3px;
    background-color: #ecf0f1;
    padding: 5px 12px;
    display: inline-block;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type="checkbox"]:checked + label {
    -webkit-transition: background-color 200ms ease;
    transition: background-color 300ms ease;
    background-color: #428bca;
    color: #fff;
}

input[type="checkbox"] + label i {
    color: #bdc3c7;
}

input[type="checkbox"]:checked + label i {
    color: white;
}

JS:

$(document).ready(function() {
     var $validator = $("#meTaggingForm").validate({
          rules: {
               gradeRange: {
                    onecheck: true
               }
          }
     });
     $.validator.addMethod('onecheck', function(value, ele) {
        return $("input:checked").length >= 1;
    }, "<i class='fa fa-exclamation-circle'></i>" + "<span>Please select this asset's grade range</span>")
});

Answer 1

这是因为 jquery 验证器默认忽略 display: none; 输入。为了将它们包含在验证中，您必须明确声明您不想通过在验证器配置中添加 ignore: [] 来忽略任何输入：

var $validator = $("#meTaggingForm").validate({
  ignore: [],
  rules: {
    gradeRange: {
      onecheck: true
    }
  }
});

查看演示：https://jsfiddle.net/wd67qyk6/

Jquery.validate() 带有自定义复选框

Jquery.validate() with custom checkboxes

javascript

css

checkbox

jquery

jquery-validate