JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<form name="itemForm" id="itemForm" method="post">

    
<div class="Crequire-one" id="quest1">
    <label for="river1">river1</label>
    <input  data-val="true" data-val-required="The     river1 field is required." id="river1" name="river1" type="checkbox" value="true" class="require-one" />
    <input name="river1" type="hidden" value="false" /><br />

    <label for="river2">river2</label>
        <input  data-val="true" data-val-required="The river2 field is required." id="river2" name="river2" type="checkbox" value="true" class="require-one" />
    <input name="river2" type="hidden" value="false" /><br />
    </div>
    <div class="Crequire-one" id="quest2">
<label for="river3">river3</label>
<input  data-val="true" data-val-required="The river3 field is required." id="river3" name="river3" type="checkbox" value="true" class="require-one" />
<input name="river3" type="hidden" value="false" /><br />
    
    <label for="river4">river3</label>
<input  data-val="true" data-val-required="The river4 field is required." id="river4" name="river4" type="checkbox" value="true" class="require-one" />
<input name="river4" type="hidden" value="false" /><br />
    
</div>
<input type="submit" />
</form>

JavaScript

$.validator.addMethod('require-one', function(value,element) 
{
   alert(element.name);
    

    return  $(element).parent().find('.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({
    groups: {
        checks: checkbox_names
    },
    errorPlacement: function(error, element) {
        if (element.attr("type") == "checkbox") error.insertAfter(checkboxes.last());
        else error.insertAfter(element);
    }
});