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="foo" />
    <br />
    <input type="text" name="bar" />
    <br />
    <br />
    <input type="submit" />
</form>

CSS

i.icon-warning {
    display: none;
    margin-right: 1em;
}

JavaScript

$(document).ready(function() {

    $('<i class="icon-warning">icon</i>').insertAfter('[type="text"]');

    $('#myform').validate({
        rules: {
            foo: {
                required: true
            },
            bar: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            error.insertAfter($(element).next('i'));
        },
        highlight: function(element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).addClass(errorClass).removeClass(validClass);
            }
            $(element).next('i').show();
        },
        unhighlight: function(element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).removeClass(errorClass).addClass(validClass);
            }
            $(element).next('i').hide();
        }
    });

});