JQuery.validate() с пользовательскими флажками

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/