帶有自定義復選框的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/