form validation

by Akram kamal

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<div id="registerForm">
    
<h1>Register</h1>

    <form action="" method="POST" class="registerForm form-horizontal">
        <div class="form-group has-feedback">
            <label class="control-label col-sm-2" for="username" id="username">Username:</label>
            <div class="col-sm-10"><span></span>
                <input type="text" name="username" class="form-control" id="username" placeholder="Enter a username">
            </div>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label col-sm-2" for="email">Email:</label>
            <div class="col-sm-10">
<span></span>

                <input id="email" type="email" name="email" class="form-control" placeholder="Enter your email - IMPORTANT">
            </div>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label col-sm-2" for="password">Password:</label>
            <div class="col-sm-10">
<span></span>

                <input id="password" type="password" name="password" class="form-control" placeholder="Enter a password">
            </div>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label col-sm-2" for="confirmpassword">Confirm Password:</label>
            <div class="col-sm-10">
<span></span>

                <input id="confirmpassword" type="password" name="confirmpassword" class="form-control" placeholder="Confirm password">
            </div>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label col-sm-2" for="code">Code:</label>
            <div class="col-sm-10">
<span></span>

                <input type="text" id="code" name="code" class="form-control" placeholder="Enter Register Code">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Register</button>
   ...

JavaScript

$(document).ready(function () {
    $('.registerForm').validate({
        rules: {
            username: {
                required: true,
                rangelength: [5, 20],
                remote: {
                    url: 'core/check.php',
                    type: "post",
                    data: {
                        username: function () {
                            return $("#username").val();
                        }
                    }
                }
            },
            password: {
                required: true,
                rangelength: [5, 20]
            },
            confirmpassword: {
                required: true,
                rangelength: [5, 20],
                equalTo: password
            },
            email: {
                required: true,
                remote: {
                    url: 'core/check.php',
                    type: "post",
                    data: {
                        email: function () {
                            return $("#email").val();
                        }
                    }
                }
            },
            code: {
                required: true,
                remote: {
                    url: 'core/check.php',
                    type: "post",
                    data: {
                        code: function () {
                            return $("#code").val();
                        }
                    }
                }
            }
        },
        messages: {
            username: {
                required: "Enter a username.",
                rangelength: "Username must be 5 to 20 character",
                remote: "Username have been taken"
            },
            password: {
                required: "Enter a password.",
                rangelength: "Password must be 5 to 20 character",
                remote: "Email have been taken"
            },
            confirmpassword: {
                required: "Confirm your password.",
  ...