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.