jQuery validation plugin – Sign Up form

I blogged about jQuery validation plugin before. I created a small and very basic example to show how this plugin works. Today I am creating a sign up form demo using this plugin. This will be a html form and I am only doing the use of validation plugin. That means I am not doing any thing server side logic. But in real application we should do server side logic also to register the user in our application. We can use any server side logic for that. This demo example has a basic registration form which has Name, User Name, Password, Email etc. In this example I am going to use two JavaScript libraries. jQuery core and jQuery validation plugin. Also I will create an external JavaScript files for this sign up form. We should use external JavaScript files whenever possible. We should keep apart any programming logic from html markup to make it more maintainable. Also browser download the script first time and cached for future use. It will speed up our web site. For the same reason I will write all my CSS in external files. Ok enough of theory now lets start some coding and develop the demo.

Sign Up Form

So I am creating my registration form. It has name, user name, password, confirm password, email, security question, security answer.

<form id="frmSignUp"> <!-- In real application we should use proper action and method attrebutes. -->                
    <table id="tblSignUp">
        <tr>
            <td>Name</td>
            <td><input type="text" id="txtName" name="txtName" /></td>
        </tr>
        <tr>
            <td>User Name</td>
            <td><input type="text" id="txtUserName" name="txtUserName" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" id="txtPassword" name="txtPassword" /></td>
        </tr>
        <tr>
            <td>Retype Password</td>
            <td><input type="password" id="txtRetypePassword" name="txtRetypePassword" /></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text" id="txtEmail" name="txtEmail" /></td>
        </tr>
        <tr>
            <td>Security Question</td>
            <td><input type="text" id="txtSecurityQuestion" name="txtSecurityQuestion" /></td>
        </tr>
        <tr>
            <td>Security Answer</td>
            <td><input type="text" id="txtSecurityAnswer" name="txtSecurityAnswer" /></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" id="btnSubmit" name="btnSubmit" value="Sign Up" />
                <input type="reset" id="btnReset" name="btnReset" value="Cancel" />
            </td>
        </tr>
    </table>
</form>	

Now I am including two JavaScript libraries into my project. jQuery core and jQuery validation plugin. All our validation logic will be in an external JavaScript file.

$(document).ready(function () {
    $('#frmSignUp').validate({
        rules: {
            txtName: {
                required: true,
                maxlength: 20
            },
            txtUserName: {
                required: true,
                maxlength: 20
            },
            txtPassword: {
                required: true,
                minlength: 6,
                maxlength: 10
            },
            txtRetypePassword: {
                equalTo: '#txtPassword'
            },
            txtEmail: {
                required: true,
                email: true
            },
            txtSecurityQuestion: {
                required: true,
                maxlength: 20
            },
            txtSecurityAnswer: {
                required: true,
                maxlength: 20
            }
        },
        messages: {
            txtName: {
                required: 'Please enter name.',
                maxlength: 'Name must have maximum 20 chars.'
            },
            txtUserName: {
                required: 'Please enter user name.',
                maxlength: 'User name must have maximum 20 chars.'
            },
            txtPassword: {
                required: 'Please enter password.',
                minlength: 'Password must have minimum 6 chars.',
                maxlength: 'Password must have maximum 10 chars.'
            },
            txtRetypePassword: {
                equalTo: 'Password and confirm password must be same.'
            },
            txtEmail: {
                required: 'Please enter email.',
                email: 'Please enter valid email.'
            },
            txtSecurityQuestion: {
                required: 'Please enter security question.',
                maxlength: 'Security question must have maximum 20 chars.'
            },
            txtSecurityAnswer: {
                required: 'Please enter security answer.',
                maxlength: 'Security answer must have maximum 20 chars.'
            }
        }
    });
});

Also I am writing some CSS for basic layout of the form. Now I am adding all the external CSS and JavaScript files into our html form.

<link href="Styles/SignUp.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="Scripts/Validation.js" type="text/javascript"></script>
<script src="Scripts/Utility.js" type="text/javascript"></script>

Our code is ready. Now run it to browser and test the validation logic. Take a closer look at the validation messages. If you can able to fill all the fields with valid values then the form will successfully submits.

Full code

html form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sign Up</title>

    <link href="Styles/SignUp.css" rel="stylesheet" type="text/css" />

    <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="Scripts/Validation.js" type="text/javascript"></script>
    <script src="Scripts/Utility.js" type="text/javascript"></script>
</head>
<body>
    <div id="dvWraper">
        
        <div id="dvHeader">
            <h1>Sign Up for a New User</h1>
        </div>       
         
        <div id="dvBody">
            <form id="frmSignUp"> <!-- In real application we should use proper action and method attrebutes. -->                
                <table id="tblSignUp">
                    <tr>
                        <td>Name</td>
                        <td><input type="text" id="txtName" name="txtName" /></td>
                    </tr>
                    <tr>
                        <td>User Name</td>
                        <td><input type="text" id="txtUserName" name="txtUserName" /></td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td><input type="password" id="txtPassword" name="txtPassword" /></td>
                    </tr>
                    <tr>
                        <td>Retype Password</td>
                        <td><input type="password" id="txtRetypePassword" name="txtRetypePassword" /></td>
                    </tr>
                    <tr>
                        <td>Email</td>
                        <td><input type="text" id="txtEmail" name="txtEmail" /></td>
                    </tr>
                    <tr>
                        <td>Security Question</td>
                        <td><input type="text" id="txtSecurityQuestion" name="txtSecurityQuestion" /></td>
                    </tr>
                    <tr>
                        <td>Security Answer</td>
                        <td><input type="text" id="txtSecurityAnswer" name="txtSecurityAnswer" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="submit" id="btnSubmit" name="btnSubmit" value="Sign Up" />
                            <input type="reset" id="btnReset" name="btnReset" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>       
         
        <div id="dvFooter">
            Copyright @ 2012 Sign Up Form
        </div>

    </div>
</body>
</html>

Validation logic

$(document).ready(function () {
    $('#frmSignUp').validate({
        rules: {
            txtName: {
                required: true,
                maxlength: 20
            },
            txtUserName: {
                required: true,
                maxlength: 20
            },
            txtPassword: {
                required: true,
                minlength: 6,
                maxlength: 10
            },
            txtRetypePassword: {
                equalTo: '#txtPassword'
            },
            txtEmail: {
                required: true,
                email: true
            },
            txtSecurityQuestion: {
                required: true,
                maxlength: 20
            },
            txtSecurityAnswer: {
                required: true,
                maxlength: 20
            }
        },
        messages: {
            txtName: {
                required: 'Please enter name.',
                maxlength: 'Name must have maximum 20 chars.'
            },
            txtUserName: {
                required: 'Please enter user name.',
                maxlength: 'User name must have maximum 20 chars.'
            },
            txtPassword: {
                required: 'Please enter password.',
                minlength: 'Password must have minimum 6 chars.',
                maxlength: 'Password must have maximum 10 chars.'
            },
            txtRetypePassword: {
                equalTo: 'Password and confirm password must be same.'
            },
            txtEmail: {
                required: 'Please enter email.',
                email: 'Please enter valid email.'
            },
            txtSecurityQuestion: {
                required: 'Please enter security question.',
                maxlength: 'Security question must have maximum 20 chars.'
            },
            txtSecurityAnswer: {
                required: 'Please enter security answer.',
                maxlength: 'Security answer must have maximum 20 chars.'
            }
        }
    });

    $('#btnReset').click(function () {
        $('#frmSignUp').validate().resetForm(); // Reset all validation errors when clicking on 'Reset' button.
    });
});

CSS for basic layout

/* Main layout
----------------------------------------- */

body 
{
    font-family: Calibri;
    font-size: 14px;
    margin: 0px;
}

#dvWraper
{
    margin-left: 10%;
    margin-right: 10%;
    border-right-style: solid;
    border-left-style: solid;
    border-right-width: thin;
    border-left-width: thin;
    border-right-color: #336699;
    border-left-color: #336699;
}

#dvHeader, #dvBody, #dvFooter
{
    padding: 2px;
}

#dvHeader
{
    background-color: #E9E9E9;
    color: #336699;
    border-bottom-style: solid;
    border-bottom-width: thick;
    border-bottom-color: #336699;
}

#dvBody
{
    height: 350px;
}

#dvFooter
{
    border-top-style: solid;
    border-top-width: thin;
    border-top-color: #336699;
    background-color: #E9E9E9;
    height: 30px;
    color: #8F8F8F;
    font-size: 12px;
}

/* Input form styles.
------------------------------------------*/

#tblSignUp
{
    margin-top: 10px;
    margin-left: 300px;
}

#tblSignUp input[type='text'], #tblSignUp input[type='password']
{
    width: 300px;
    padding: 5px;
    font-family: Calibri;
    font-size: 14px;
}

#tblSignUp input[type='submit'], #tblSignUp input[type='reset']
{
    font-family: Calibri;
    font-size: 14px;
    background-color: #E9E9E9;
    width: 70px;
    height: 30px;
}

#tblSignUp td
{
    padding: 2px;
}

#dvButton
{
    text-align: right;
}

/* Styles for invalid fields.
---------------------------------------*/

input.error
{
    background-color: #FFDDDD;
}

label.error
{
    color: Red;
}
Sign Up
Sign Up
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s