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

    <input type="text" class="required" />
    
<div class="crequire-one" name="quest1" id="quest1">
    <label for="river1">river1</label>
    <input  data-val="true" 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  id="river2" name="river2" type="checkbox" value="true" class="require-one" />
    <input name="river2" type="hidden" value="false" /><br />
</div>
<div  name="quest2" class="crequire-one" id="quest2">
    <label for="river3">river3</label>
    <input  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   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) 
{

    return  $(element).closest(".ContainerRequire-one").find('.require-one:checked').size() > 0;

}, 'Selecione pelo menos uma opção.');



$("#itemForm").validate({
    
    errorPlacement: function(error, element) {
        
        var last = $(element).closest(".ContainerRequire-one").find("input[type='checkbox']").last();
        
        if ($(last).attr("name") == $(element).attr("name")) {
           error.insertAfter(element);
        }else
        {
            alert("elseValidate");
            if($(last).attr("name") == undefined)
                error.insertAfter(element);
        }            
    }
});