JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<form name="itemForm" id="itemForm" method="post">
<div id="boxes">
    <input type="checkbox" name="check1" id="check1" class="require-one" value="1" /> <label for="check1">Item #1 </label><br>
    <input type="checkbox" name="check2" id="check2" class="require-one" value="2" /><label for="check2"> Item #2 </label>
</div>
<div id="freetext">
    <input type="text" class="required" />
</div>
<input type="submit" />
</form>

CSS

.checkbox-error {
    color: green;
}
.error {
    background-color: red;
}

JavaScript

$.validator.addMethod('require-one', function(value) {
    return $('.require-one:checked').size() > 0;
}, 'Please check at least one box.');

var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
    return $(e).attr("name")
}).join(" ");

$("#itemForm").validate({
    errorPlacement: function(error, element) {
        return true;
    },
    groups: {
        checks: checkbox_names
    },
    highlight: function(element, errorClass) {

        $(element).parent('div').addClass('checkbox-error');
        $(element).addClass(errorClass);
    },
    unhighlight: function(element, errorClass) {
        $(element).parent('div').removeClass('checkbox-error');
        $(element).removeClass(errorClass);
    }
});