JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form class="cmxform" id="myform" method="get" action="#">
<fieldset>
<p>
<input type="checkbox" class="cbMinRequired checkbox" name="mycheckboxes" value="cb0" checked="checked" />cb0
<br>
<input type="checkbox" class="cbMinRequired checkbox" name="mycheckboxes" value="cb1" />cb1
<br>
<input type="checkbox" class="cbMinRequired checkbox" name="mycheckboxes" value="cb2" />cb2
<br>
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
JavaScript
var submitEnabled = false;
$.validator.setDefaults({
submitHandler: function () {
if(submitEnabled) {
alert("submitted!");
}
else{
return false;
}
}
});
$.validator.methods.cbMinRequired = function (value, element, param) {
return $(element).parent().find(":checked").length >= param;
};
$.validator.messages = {
required: "required",
cbMinRequired: $.validator.format("min {0} required")
};
$(function () {
// validate the comment form when it is submitted
$("#myform").validate({
keyup: true,
keypress: true,
click: true,
change: true,
debug: true,
errorClass: "invalid",
rules: {
mycheckboxes: {
cbMinRequired: 1
}
},
errorPlacement: function (error, element) {
if ($(element).hasClass("checkbox")) {
error.insertAfter($(element).siblings().last());
} else {
error.insertAfter(element);
}
}
});
$('#myform').submit();
submitEnabled = true;
});