JSFiddle - React, Tailwind, and code Playground

by Artur Filipiak

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form action="" method="POST" class="form-horizontal" id="registerForm">
    <div class="form-group">
        <label class="control-label col-sm-2" for="email">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="email">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="email">Confirm Password:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" name="confirmpassword" placeholder="Confirm Password" id="confirmpassword" />
        </div>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="checkbox">Click it</label>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>

JavaScript

$(document).ready(function () {

    $('#registerForm').validate({
        rules: {
            username: {
                required: true,
                minlength: 5,
                maxlength: 20
            },
            email: {
                required: true,
                minlength: 5,
                maxlength: 255,
                email: true
            },
            password: {
                required: true,
                minlength: 5,
                maxlength: 30
            },
            confirmpassword: {
                required: true,
                equalTo: '#password'
            }
        },
        messages: {
            username: {
                required: 'You must enter a username',
                minlength: 'Your username is too short',
                maxlength: 'Your username is too long'
            },
            email: {
                required: 'You must enter a email',
                minlength: 'Your email is too short',
                email: 'Please enter a valid email address'
            },
            password: {
                required: 'You must enter a password',
                minlength: 'Your password is too short',
                maxlength: 'Your password is too long'
            },
            confirmpassword: {
                required: 'You must confirm your password',
                equalTo: 'You password does not match'
            }
        }
    });

});