カスタムチェックボックスを使用した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/