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>
<div class="validation-errors"></div>
<form>
    <input type="text" name="field1" required />
    <input type="text" name="field2" required />
    <input type="submit" />
</form>

JavaScript

$(document).ready(function() {
    // validate form
    $("form").parsley();
    
    // Before each validation, clear the validation-errors of the div
    $.listen('parsley:form:validate', function() {
        $('.validation-errors').html('');
    });
        
    // When a field has an error
    $.listen('parsley:field:error', function(fieldInstance){
        // Get the error messages
        var messages = ParsleyUI.getErrorsMessages(fieldInstance);
        
        // Get the field's name
        var fieldName = fieldInstance.$element.attr('name');
        
        // Loop through all the messages
        for (var i in messages) {
            // Create a message for each error
            var $m = $('<p><a class="focus-' + fieldName + '" href="#">' + fieldName + ': ' + messages[i] + '</a><p>');
            
            // Append the errors to the div
            $('.validation-errors').append($m);
        }
    });        
});

// When there's a click on a error message from the div
$(document).on('click', 'a[class^="focus-"]', function(){
    // take the field's name from the class
    var parts = $(this).attr('class').split('-');
    
    $("[name=" + parts[1] + "]").focus();
});