JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<form id="TestForm">
    <input type="text" id="txtIn" name="txtIn" />
    <p></p>
    <button id="submit">Submit</button>
</form>

CSS

label {
    display: inline-block;
    margin-left:10px;
    background-color: red;
    width: 15px;
    height: 15px;
}
label.error {
    background-color: red;
}
label.valid {
    background-color: blue;
}

JavaScript

$(document).ready(function () {


    var messages = {
        'txtInRequired': ""
    };

    $('#TestForm').validate({
        rules: {
            txtIn: {
                required: true,
                rangelength: [8, 16]
            }
        },
        messages: {
            txtIn: messages.txtInRequired
        },
        onfocusout: function (element) {
            this.element(element);
        },
        success: function (label, element) {
            console.log(element);
            if ($(element).hasClass("valid")) {
                label.addClass("valid");
            }
        },
        submitHandler: function (form) {

            alert('form is valid');
            return false;
        },
        focusInvalid: false,
        focusCleanup: true,
        onkeyup: false
    });

});