JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<div id="errormessages"></div>
<form id="myform">
    <label for="firstname" class="required">First name</label>
    <input type="text" required="required" name="firstname" id="firstname" class="textInput" />
    <br/>
    <label for="lastname" class="required">Last name</label>
    <input type="text" required="required" name="lastname" id="lastname" class="textInput" />
    <br/>
    <label for="email" class="required">Email</label>
    <input type="text" required="required" name="email" id="email" class="textInput" />
    <br/>
    <input type="submit" />
</form>
<a href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

CSS

a {
    display: block;
    position: absolute;
    bottom: 0;
}

JavaScript

$(document).ready(function () {

    $("#myform").validate({
        rules: {
            firstname: {
                required: true
            },
            lastname: {
                required: true
            },
            email: {
                required: true
            }
        },
        errorPlacement: function (error, element) {
            error.insertBefore(element);
        },
        showErrors: function (errorMap, errorList) {
            var msg = "Your form contains " + this.numberOfInvalids() + " errors, see details below.<br/>"
            $.each(errorMap, function(key, value) {
                msg += key + ": " + value + "<br/>";
            });
            $("#errormessages").html(msg);

            if (this.numberOfInvalids() > 0) {
                $("#errormessages").show();
            } else {
                $("#errormessages").hide();
            }
        }
    });

});