Apply Single JavaScript Function to Multiple Textboxes For Validation

Introduction

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

Our applications usually have more than five Textboxes on each web page, 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.

Its 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.

Textboxes

Now I clicked on the first TextBox.

Submit

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

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

Localhost

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.

Fewer characters