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

jQuery.validator.addMethod("emailCustom", function (value, element, params) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(value);
}, "Please enter a valid email address.");

$('#form-validate').validate({
    rules: {
        email: {
            required: true,
            emailCustom: 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);
    }
});