带有自定义复选框的Jquery.validate（）

Question

I'm having a difficult time getting jQuery.validate() to work with some custom styled checkboxes, and I'm wondering if anyone can see what I may be doing wrong here. The desired result, is when I click SUBMIT, and no checkboxes are selected, the error should appear in the appropriate label. Unfortunately, nothing is appearing at all, and I'm not getting any console errors that my code is incorrect.

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

It is because jquery validator ignore display: none; inputs by default. In order to include them into the validation, you must explicitly state that you don't want to ignore any input by adding ignore: [] into the validator configurations:

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

See demo: https://jsfiddle.net/wd67qyk6/