Question

我很难让jQuery.validate（）使用一些自定义样式的复选框，我想知道是否有人能看到我在这里做错了什么。所需的结果是，当我单击SUBMIT，并且未选中任何复选框时，错误应出现在相应的标签中。不幸的是，什么都没有出现，我没有得到任何控制台错误，我的代码不正确。

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（）

1 个答案: