Click here to Skip to main content
11,922,641 members (31,975 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


14 bookmarked

JQuery Validation for Registration Form Containing Name, Email, Mobile Number, Password

, 19 Jan 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Simple JQuery validation for Registration form containing name, email, mobile number, password


This tip validates fields in registration form on submitting it. Fields like name, email, mobile number, password, etc can be validated at form submission. This code uses basic and understandable JQuery scripts. Also, the logic is very simple and an acceptable one.


Since I am a beginner in JQuery, I was thinking of learning it in an easy way. So I decided to start writing simple codes using JQuery. While working on JQuery for the first time, I enjoyed a lot and also learnt many things. This tip will give basic ideas and good experience for beginners.

Using the Code


/*-- css for error popups--*/
<style type="text/css" >
            margin-top: 12px;
            float: left;
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 10px solid #e2e2e2;
            z-index: 1000;
            background: #e2e2e2;
            color: red;
            padding-left: 5px;
            padding-right: 5px;
            height: 24px;
            line-height: 24px;
            font-size: 11px;
            font-style: italic;
            margin-top: 8px;
            float: left;
            border: solid 1px silver;
            border-top-right-radius: 7px;
            border-bottom-right-radius: 7px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            z-index: 99;
            margin-top: -10px;
            display: inline;
            padding-left: 5px;
            margin-right: 0px;
            position: absolute;
            z-index: 2;

JQuery Script

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

Source Code

 <table style="width: 600px; border: solid 1px silver; 
color: #565656; line-height: 25px;">
                <td class="Header_style" 
                colspan="2" align="center">
                    Registration form

Snapshots for Registration form are given below

1. Before Form Submission

Registration form looks like the above containing fields Username, Email Id, Password, Retype password, Mobile number. We generally know that:

  1. User name can't be blank
  2. Email should be valid
  3. Password length should be greater than 8 characters
  4. Retype password should match the password
  5. And finally valid 10 digit mobile number

2. After Submission

I put the required validation for all fields except retype password where it checks for password match. and valid email validation for email field. And password length should be 8 characters and mobile number sholud be 10 digits. You are looking at validation below:

3. On Successful Validation

On all conditions satisfied, the successful message will be shown.

Hope it helps you.

Thank you very much.

Points of Interest

I have learnt the basic idea of how the validation goes in forms and also learnt how to handle inputs from controls.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer Sonata Software Pvt Ltd
India India
Hi.. I am Vinod Kumar B C from Mysore, Karnataka. I have done MCA and currently working as a Software Engineer having 3 Years of Experience in web development. I know, C#, MVC, Sql Server, CSS, JQuery, C, C++, HTML, DB2, DataStructures.

You may also be interested in...

Comments and Discussions

Questionno actions occurred Pin
Member 1126225023-Dec-14 15:21
memberMember 1126225023-Dec-14 15:21 
AnswerRe: no actions occurred Pin
vinodkumarnie23-Dec-14 19:11
membervinodkumarnie23-Dec-14 19:11 
Questionhi...very helpfull... but can i get same functionality before submit i.e onchange Pin
yogika9-May-14 21:59
memberyogika9-May-14 21:59 
AnswerRe: hi...very helpfull... but can i get same functionality before submit i.e onchange Pin
vinodkumarnie10-May-14 3:25
membervinodkumarnie10-May-14 3:25 
GeneralMy vote of 3 Pin
SriramNidamanuri14-Aug-13 1:57
memberSriramNidamanuri14-Aug-13 1:57 
GeneralRe: My vote of 3 Pin
vinodkumarnie14-Aug-13 8:58
membervinodkumarnie14-Aug-13 8:58 
GeneralMy vote of 1 Pin
Member 97689513-Jul-13 2:48
memberMember 97689513-Jul-13 2:48 
GeneralRe: My vote of 1 Pin
vinodkumarnie4-Jul-13 5:36
membervinodkumarnie4-Jul-13 5:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151125.1 | Last Updated 19 Jan 2013
Article Copyright 2013 by vinodkumarnie
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid