JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

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" />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

$.validator.setDefaults({
	    submitHandler: function () {
	        alert("submitted!");
	    }
	});
	$.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").valid();
	});