JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form id="myForm">
    <input type="text" name="userName" placeholder="enter your name" value="" />
    <input type="submit" name="submit" value="submit" />
</form>

CSS

input.error {
    border: 4px solid red;
}

JavaScript

$(document).ready(function() {
    $("#myForm").validate({
        debug: true,
        rules: {
            userName: {
                required: true,
                minlength: 2
            }
        },
        onkeyup: function(element, event) {
			var t = this;
            setTimeout(function() {
                var excludedKeys = [
                    16, 17, 18, 20, 35, 36, 37,
                    38, 39, 40, 45, 144, 225
                ];
                if (event.which === 9 && t.elementValue(element) === "" || $.inArray(event.keyCode, excludedKeys) !== -1) {
                    return;
                } else if (element.name in t.submitted || element.name in t.invalid) {
                    t.element(element);
                }
            }, 3000);
        },
        submitHandler: function(form) {
            alert("pass validation");
        }
    });
});