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/