JSFiddle - React, Tailwind, and code Playground

by Jimmy Ruan

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<form action="core/registeraction.php" method="POST" class="form-horizontal" id="registerForm">
    <div class="form-group">
        <label class="control-label col-sm-2" for="username">Username:</label>
        <div class="col-sm-10">
            <input type="username" class="form-control" name="username" placeholder="Enter username" id="username" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" name="email" placeholder="Enter email" id="email" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="password">Password:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" name="password" placeholder="Enter password" id="password" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="confirmpassword">Confirm:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" name="confirmpassword" placeholder="Confirm Password" id="confirmpassword" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Register</button>
        </div>
    </div>
</form>

JavaScript

$(document).ready(function () {

    $('#registerForm').validate({
        rules: {
            username: {
                required: true,
                minlength: 5,
                maxlength: 20,
                remote: {
                    url: "check/username.php",
                    type: 'POST'
                }
            },
            email: {
                required: true,
                minlength: 5,
                maxlength: 255,
                email: true
            },
            password: {
                required: true,
                minlength: 5,
                maxlength: 30
            },
            confirmpassword: {
                required: true,
                equalTo: '#password'
            }
        },
        messages: {
            username: {
                required: '<span class="error">You must enter a username.</span>',
                minlength: '<span class="error">Your username is too short.</span>',
                remote: '<span class="error>This username have been taken.</span>'
            },
            email: {
                required: '<span class="error">You must enter a email.</span>',
                minlength: '<span class="error">Your email is too short.</span>',
                email: '<span class="error">Please enter a valid email address.</span>'
            },
            password: {
                required: '<span class="error">You must enter a password.</span>',
                minlength: '<span class="error">Your password must be more then 5 letter.</span>',
                maxlength: '<span class="error">Your password is too long.</span>'
            },
            confirmpassword: {
                required: '<span class="error">You must confirm your password.</span>',
                equalTo: '<span class="error">You password does not match.</span>'
            }
        }
    });

});