JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form action="" method="post">
     <h1>Pure HTML5 validation</h1>

    <div>
        <label for="email">Email address</label>
        <input type="email" id="email" name="email" required="required">
    </div>
    <input type="submit" value="Submit">
</form>
<form action="" method="post" id="form-validate">
    <h1>HTML5 + jQuery validation</h1>
    <div>
        <label for="email">Email address</label>
        <input type="email" id="email" name="email" required="required">
    </div>
    <input type="submit" value="Submit">
</form>

CSS

form {
    border: 1px solid gray;
    padding: 5px;
    margin: 5px;
}

JavaScript

$('#form-validate').validate({
     rules: {
         email: {
             required: true,
             email: true
         }
     },
     highlight: function (element) {
         $(element).closest('form').addClass('has-error');
     },
     unhighlight: function (element) {
         $(element).closest('form').removeClass('has-error');
     },
     errorElement: 'span',
     errorClass: 'help-block',
     errorPlacement: function (error, element) {
         error.insertAfter(element);
     }
 });