JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<form>
    <div class="row">
        <label for="RequiredDateDemo">A date is required (eg "15 June 2012"):</label>
        <input data-msg-date="The field RequiredDateDemo must be a date." data-msg-required="The RequiredDateDemo field is required." data-rule-date="true" data-rule-required="true" id="RequiredDateDemo" name="RequiredDateDemo" type="text" value="" />
    </div>
    <div class="row">
        <label for="StringLengthAndRequiredDemo">A string is required between 5 and 10 characters long:</label>
        <input data-msg-maxlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10." data-msg-minlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10." data-msg-required="The StringLengthAndRequiredDemo field is required." data-rule-maxlength="10" data-rule-minlength="5" data-rule-required="true" id="StringLengthAndRequiredDemo" name="StringLengthAndRequiredDemo" type="text" value="" />
    </div>
    <div class="row">
        <label for="RangeAndNumberDemo">Must be a number between -20 and 40:</label>
        <input data-msg-number="The field RangeAndNumberDemo must be a number." data-msg-range="The field RangeAndNumberDemo must be between -20 and 40." data-rule-number="true" data-rule-range="[-20,40]" id="RangeAndNumberDemo" name="RangeAndNumberDemo" type="text" value="-21" />
    </div>
    <div class="row">
        <label...

CSS

form {
    padding: 10px;
}
.error {
    border: 1px solid #b94a48!important;
    background-color: #fee!important;
}

JavaScript

$(document).ready(function () {

    $("form").validate({
        showErrors: function (errorMap, errorList) {

            // Clean up any tooltips for valid elements
            $.each(this.validElements(), function (index, element) {
                var $element = $(element);

                $element.data("title", "") // Clear the title - there is no error associated anymore
                .removeClass("error")
                    .tooltip("destroy");
            });

            // Create new tooltips for invalid elements
            $.each(errorList, function (index, error) {
                var $element = $(error.element);

                $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
                .data("title", error.message)
                    .addClass("error")
                    .too2ltip(); // Create a new tooltip based on the error messsage we just set in the title
            });
        },
        submitHandler: function (form) {
            alert("This is a valid form!");
        }
    });
});