JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<form id="signupform" method="post">
    <div>
        <span>Username: </span>
        <input type="text" id="username" name="username" required="required" minlength="2" />
    </div>
    <div>
        <span>Password: </span>
        <input type="text" id="password1" name="password1" required="required" minlength="5" />
    </div>
    <div>
        <span>Confirm password: </span>
        <input type="text" id="password2" name="password2" required="required" minlength="5" equalTo="#password1" />
    </div>
    <div>
        <span>Email: </span>
        <input type="email" id="email" name="email" required="required" notEqualTo="#username" />
    </div>
    <div>
        <span>Confirm email: </span>
        <input type="email" id="email2" name="email2" required="required" equalTo="#email" />
    </div>
    <div>
        <span>Agreement: </span>
        <input type="checkbox" id="usage" name="usage" required="required" />
        <label for="usage">I agree</label>
    </div>
    <div>
        <span></span>
        <button>Submit</button>
    </div>
</form>

CSS

div { display: block; clear: both; }
span { display: inline-block; width: 150px; }
.error { color: #CC0000; }

JavaScript

$.validator.addMethod("notEqualTo", function (value, element, param)
{
    var target = $(param);
    if (value) return value != target.val();
    else return this.optional(element);
}, "Repeated field");

$("#signupform").validate({
    messages: {
        username: {
            required: "please username!!",
            minlength: "username at least 2 chars",
            remote: "username in use!"
        },
        password1: {
            required: "please password!",
            minlength: "password at least 5 chars"
        },
        password2: {
            required: "please password",
            minlength: "password at least 5 chars",
            equalTo: "password fields have to match"
        },
        email: {
            required: "validate email please!",
            email: "check the format!",
            remote: "email in use!",
            notEqualTo: "can't match with username!"
        },
        email2: {
            required: "please provide correct email address!",              
            equalTo: "email fields must match!"
        },
        usage: "please check my terms!" 
    }
});