My struggle lies in integrating jQuery.validate() with custom-designed checkboxes. I am unable to achieve the desired outcome where, upon clicking SUBMIT without selecting any checkboxes, an error should be displayed in the respective label. Despite having no console errors indicating incorrect code, nothing appears at all. Can anyone pinpoint what might be amiss here?
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>")
});