Apply Single JavaScript Function to Multiple Textboxes For Validation

This article exlains how to apply a single JavaScript Function to Multiple Textboxes to validate them.

Introduction

This article explains how to apply a single JavaScript Function to multiple Textboxes to validate them.

Our applications usually have more then five Textboxes on each Webpage and if it's a form then the number of Textboxes can increase up to 20-30, in that case creating a JavaScript Function for each TextBox is not a good choice because it will create a heavy code only for validations. This article will help you create only a single JavaScript Function that can be applied to any number of Textboxes.

Use the following procedure to create such an application.

Step 1

First of all I will create a new application in which I will create a form to be submitted by the user.

It's code is as follows:

<table>

        <tr>

            <td>

                <asp:Label runat="server" ID="lbl1" Text="First Name:-"></asp:Label>

            </td>

            <td>

                <asp:TextBox ID="txtID2" runat="server" onblur="onLeave(this)"></asp:TextBox>

            </td>

            <td>

                <asp:Label runat="server" ID="Label4" Text="Middle Name:-"></asp:Label>

            </td>

            <td>

                <asp:TextBox ID="TextBox4" runat="server" onblur="onLeave(this)"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td>

                <asp:Label runat="server" ID="Label1" Text="Last Name:-"></asp:Label>

            </td>

            <td>

                <asp:TextBox ID="TextBox1" runat="server" onblur="onLeave(this)"></asp:TextBox>

            </td>

            <td>

                <asp:Label runat="server" ID="Label5" Text="Email ID:-"></asp:Label>

            </td>

            <td>

                <asp:TextBox ID="TextBox5" runat="server" onblur="onLeave(this)"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td>

                <asp:Label runat="server" ID="Label2" Text="Phone Number:-"></asp:Label>

            </td>

            <td>

                <asp:TextBox ID="TextBox2" runat="server" onblur="onLeave(this)"></asp:TextBox>

            </td>

            <td>

                <asp:Label runat="server" ID="Label6" Text="Age:-"></asp:Label>

            </td>

            <td>

                <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td>

                <asp:Label runat="server" ID="Label3" Text="Fathers Name:-"></asp:Label>

            </td>

            <td>

                <asp:TextBox ID="TextBox3" runat="server" onblur="onLeave(this)"></asp:TextBox>

            </td>

            <td>

                <asp:Label runat="server" ID="Label7" Text="Mothers Name:-"></asp:Label>

            </td>

            <td>

                <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td>

                <asp:Button runat="server" Text="Submit" />

            </td>

        </tr>    

    </table>

Step 2

Now I will create the JavaScript function that is to be applied for validating the Textboxes.

    <script>

        function onLeave(_input)

        {

            var check = _input.value;

            if (check.length < 3) {

                alert("Enter Something");

                _input.focus();

            }

        }

    </script>

Here _input represents the Textboxes. A variable named check is used that will hold the value of the TextBox on which it is applied.

Then the Length of that value will be checked, if the length is found to be less than 3 then an alert message will be shown and the focus will be returned to the TextBox of which the user was earlier.

Step 3

After creating the Function I call it on the Blur event of the TextBox. It's done like this:

onblur="onLeave(this)"

Now our application is created and is ready to get executed.

Output

On running the application the user will see a form to be filled.

one javascript function for all textboxes

Now I clicked on the first TextBox.

one javascript function for all textboxes

But I tried to leave this TextBox and go to the other one but as you can see I was not allowed to do that, an error message was displayed and the focus will again go to the first TextBox

one javascript function for all textboxes

I then provided my first name and you can see that I was allowed to go to the next TextBox.

one javascript function for all textboxes

Here also I tried to provide fewer characters than allowed and you can see again the same error message is displayed and the focus will go to the second TextBox.

one javascript function for all textboxes