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>
    <div id="errors"></div>
    <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>
    </fieldset>

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

JavaScript

$(document).ready(function() {
    var parsleyConfig = {
        errorsContainer: function(parsleyField) {
            return $('#errors');
        }
    };
    
        
    $("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();
    });
});