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" />
    </div>
    <div>
        <span>Password: </span>
        <input type="text" id="password1" name="password1" />
    </div>
    <div>
        <span>Confirm password: </span>
        <input type="text" id="password2" name="password2" />
    </div>
    <div>
        <span>Email: </span>
        <input type="text" id="email" name="email" />
    </div>
    <div>
        <span>Confirm email: </span>
        <input type="text" id="email2" name="email2" />
    </div>
    <div>
        <span>Agreement: </span>
        <input type="checkbox" id="usage" name="usage" />
        <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({
    rules: {
        username: {
            required: true,
            minlength: 2,
            //remote: "/_misc/formcheck/username.cfm"
        },
        password1: {
            required: true,
            minlength: 5
        },
        password2: {
            required: true,
            minlength: 5,
            equalTo: "#password1"
        },
        email: {
            required: true,
            email: true,
            //remote: "/_misc/formcheck/email.cfm",
            notEqualTo: "#username"
        },
        email2: {
            required: true,
            email: true,
            equalTo: "#email"
        },
        usage: "required"                       
    },
    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!" 
    },
});