Click here to Skip to main content
Click here to Skip to main content

Tagged as

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

Introduction

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.

Background

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

HTML Code

 /*-- css for error popups--*/
<style type="text/css" >
        .arrow-left
        {
            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;
        }
        .tool_tip
        {
            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;
        }
        .tooltip_outer
        {
            margin-top: -10px;
            display: inline;
            padding-left: 5px;
            margin-right: 0px;
            position: absolute;
            z-index: 2;
        }
    </style>

JQuery Script

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    //function to allow only numbers
        function numericsonly(ob) 
        {
            var invalidChars = /[^0-9]/gi
            if(invalidChars.test(ob.value)) 
            {
                ob.value = ob.value.replace(invalidChars,"");
            }
        } //function to allow only numbers ends here
        
        //On page load hide all tool tips
        $('.required').next('.tooltip_outer_feedback').hide();
        $('.required_feedback').next('.tooltip_outer').hide();
        //---
        
        //Onpage load
        $(document).ready(function()
        {
            //On key up in texbox's hide error messages for required fields
            $('.required').keyup(function()
            {
                $(this).next('.tooltip_outer').hide();
            });
            //On selected item change in dropdownlist hide error messages for required fields
            $('.dpreq').change(function()
            {
                $(this).next('.tooltip_outer').hide();
            });
            //On key up for mobile number avoid non-numeric characters
            $('.mobile').keyup(function()
            {
                $(this).next('.tooltip_outer').hide();
                numericsonly(this); // definition of this function is above
            });
            
            // On button click or submitting values
        $('.btn_validate').click(function(e) 
        {
            var empty_count=0; // variable to store error occured status
            $('.required').next('.tooltip_outer').hide();
            $('.required').each(function()
            {
                if($(this).val().length === 0)
                {
                    $(this).after("<div class='tooltip_outer'>
                    <div class='arrow-left'></div> 
                    <div class='tool_tip'>Can't be blank
                    </div></div>").show("slow");
                    empty_count=1;
                }
                else
                {
                    $(this).next('.tooltip_outer').hide();
                    if($(this).hasClass('mobile'))
                    {
                        if($(this).val().length != 10)
                        {
                            $(this).after('<div class="tooltip_outer">
                            <div class="arrow-left"></div> 
                            <div class="tool_tip">Mobile should be 10 digits
                            </div></div>').show("slow");
                            empty_count=1; 
                        }
                        else
                        {
                            $(this).next('.tooltip_outer').hide();
                        }
                    }
                    if($(this).hasClass('email'))
                    {
                        $(this).next('.tooltip_outer').hide();
                        var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]
                        {1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|
                        [0-9]{1,3})(\]?)$/;
                        if(filter.test($(this).val()) === false)
                        {
                            $(this).after('<div class="tooltip_outer">
                            <div class="arrow-left"></div> 
                            <div class="tool_tip">Invalid Email
                            </div></div>').show("slow");
                            empty_count=1;
                        }
                        else
                        {
                            $(this).next('.tooltip_outer').hide();
                        }
                    }
                    if($(this).hasClass('password'))
                    {
                        $(this).next('.tooltip_outer').hide();
                        if($(this).val().length < 8)
                        {
                            $(this).after("<div class='tooltip_outer' 
                            style='color:red; float:right;'><div class='arrow-left'>
                            </div> <div class='tool_tip'>length must be 8 and above
                            </div></div>").show();
                            empty_count=1; 
                        }
                        else
                        {
                            $('.comfirm_password').next('.tooltip_outer').hide();
                            if($(this).val()===$('.comfirm_password').val())
                            {
                                $(this).next('.tooltip_outer').hide();
                            }
                            else
                            {
                                $('.comfirm_password').after("<div class='tooltip_outer' 
                                style='color:red; float:right;'><div class='arrow-left'>
                                </div> <div class='tool_tip'>Password mismatch
                                </div></div>").show();
                                empty_count=1; 
                            }
                        }
                    }
                }
            });
            $('.dpreq').next('.tooltip_outer').hide();
            $('.dpreq').each(function()
            {
                
                $(this).next('.tooltip_outer').hide();
                if($(this).attr("selectedIndex") === 0)
                {
                    $(this).after("<div class='tooltip_outer'>
                    <div class='arrow-left'></div> 
                    <div class='tool_tip'>Please select option
                    </div></div>").show("slow");
                    empty_count=1;
                }
                else
                {
                    $(this).next('.tooltip_outer').hide();
                 }
            });
            if(empty_count===1)
            {
                e.preventDefault();
            }
            else
            {
                $('.tooltip_outer').hide();
                alert('Successful');
            }
        }
        );
      });
    </script>

Source Code

 <table style="width: 600px; border: solid 1px silver; 
color: #565656; line-height: 25px;">
            <tr>
                <td class="Header_style" 
                colspan="2" align="center">
                    Registration form
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <hr />
                </td>
            </tr>
            <tr>
                <td style="width: 200px;">
                </td>
                <td style="width: 400px;">
                </td>
            </tr>
            <tr>
                <td style="width: 200px;">
                    User name
                </td>
                <td style="width: 400px;">
                    <asp:TextBox ID="TextBox1" 
                    runat="server" class="required"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 200px;">
                    Email Id
                </td>
                <td style="width: 400px;">
                    <asp:TextBox ID="TextBox2" runat="server" 
                    class="required email"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 200px;">
                    Password
                </td>
                <td style="width: 400px;">
                    <asp:TextBox ID="TextBox3" runat="server" 
                    class="required password"  
                    TextMode="Password"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 200px;">
                    Retype password
                </td>
                <td style="width: 400px;">
                    <asp:TextBox ID="TextBox4" runat="
                    server" class="password comfirm_password"  
                    TextMode="Password"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 200px;">
                    Mobile Number
                </td>
                <td style="width: 400px;">
                    <asp:TextBox ID="TextBox5" runat="server" 
                    class="required mobile"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 200px;">
                </td>
                <td style="width: 400px;">
                </td>
            </tr>
            <tr>
                <td style="width: 200px;">
                </td>
                <td style="width: 400px;">
                    <asp:Button ID="Button1" class="
                    button_style btn_validate" runat="server" 
                    Text="Button" />
                </td>
            </tr>
        </table>

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.

License

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

Share

About the Author

vinodkumarnie
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 Asp.net, C#, MVC, Sql Server, CSS, JQuery, C, C++, HTML, DB2, DataStructures.
Follow on   Google+

Comments and Discussions

 
Questionhi...very helpfull... but can i get same functionality before submit i.e onchange Pinmemberyogika9-May-14 21:59 
AnswerRe: hi...very helpfull... but can i get same functionality before submit i.e onchange Pinmembervinodkumarnie10-May-14 3:25 
GeneralMy vote of 3 PinmemberSriramNidamanuri14-Aug-13 1:57 
GeneralRe: My vote of 3 Pinmembervinodkumarnie14-Aug-13 8:58 
GeneralMy vote of 1 PinmemberMember 97689513-Jul-13 2:48 
GeneralRe: My vote of 1 Pinmembervinodkumarnie4-Jul-13 5:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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.1411023.1 | Last Updated 19 Jan 2013
Article Copyright 2013 by vinodkumarnie
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid