JSFiddle - React, Tailwind, and code Playground

by Stephen McKenna

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/parsley.js/1.2.2/parsley.min.js"></script>
<form id="form" action="#">
    <div class="row">
        <label for="name">Name:</label>
        <input id="name" type="text" placeholder="Your name" parsley-minlength="6" parsley-required="true" />
    </div>
    <div class="row">
        <input type="submit" value="Validate" />
    </div>
</form>

JavaScript

function updateMessage($target) {
    var inputValue = $target.val();
    var id = $target.attr('id');
    var valueOrLabel = inputValue ? inputValue : id;
    
    $('#form').parsley('destroy');
    $( '#form' ).parsley({
        messages: {
            required: valueOrLabel + ' Error message',
            minlength: valueOrLabel + ' is too short'
        } 
    });
    $('#form').parsley('isValid');
}

updateMessage($('#name'));

$('input[type="text"]').on('keyup', function() {
    updateMessage($(this));
});