JSFiddle - React, Tailwind, and code Playground

by seanmcmills

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<form name="itemForm" id="itemForm" method="post">
    
<input type="checkbox" name="workflow[city_ids][]" id="workflow_city_ids_" class="require-one" value="1" /> aa
<input type="checkbox" name="workflow[city_ids][]" id="workflow_city_ids_" class="require-one" value="2" /> ab
<br>
    
<input type="checkbox" name="workflow[status_ids][]" id="workflow_status_ids_" class="require-one" value="1" /> ba
<input type="checkbox" name="workflow[status_ids][]" id="workflow_status_ids_" class="require-one" value="2" /> bb
<br>
    
<input type="text" class="required" />
<input type="submit" />
</form>

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