JSFiddle - React, Tailwind, and code Playground

by milz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<form>
    <fieldset>
        <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" /> 1
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3
        </label>
        
        <div id="checkbox-errors"></div>
    </fieldset>

    <input type="text" required />
    <input type="submit" />    
</form>

JavaScript

$(document).ready(function() {
    var parsleyConfig = {
        errorsContainer: function(parsleyField) {
            // fieldInstance is a ParlseyField instance
            // you can access the dom element with fieldInstance.$element
            var fieldSet = parsleyField.$element.closest('fieldset');
            
            // if this element is nested inside a fieldset, set the container as the last element of that fieldset
            if (fieldSet.length > 0) {
                return fieldSet.find('#checkbox-errors');
            }
            
            return parsleyField;
        }
    };
    
        
    $("form").parsley(parsleyConfig);
    
    $("form").on('submit', function(e) {
        var f = $(this);
        f.parsley().validate();
        
        if (f.parsley().isValid()) {
            alert('The form is valid');
        } else {
            alert('There are validation errors');
        }
        
        e.preventDefault();
    });
});