Validate Email ID in ASP.NET TextBox using JavaScript

Hi,

Lets come back to ASP.NET series. Here is a short tip which will be beneficial for every time which will be useful for every developer working for web site.

Why to Validate Email?

Almost in every web application, we need to develop some contact form or some form where we capture users data. Either that is users information or other business information, the correct formed data is crucial for every business. Suppose, you created a form and allowed user to enter his email ID. But by mistake or intentionally, user entered wrong email ID, you need to contact to entered contact for validation or other purpose. Suppose what will be the scenario.

This example proves why it is important to validate data before saving to database. There are many methods to achieve this task but whatever the method is, the logic is regular expressions. Regular expressions are piece of formula which match pattern in given string. We will use a JavaScript regular expression to check either email ID is valid or not.

Email ID Rules:

1. It should have three parts. User Name, Domain Name, TLD.
2. Only one @ (at) symbol can be present.
3. Domain must have at least one . (dot).

HTML Design

To understand this, we have created a simple example. Lets have look at webform code.

    <form id="form1" runat="server">
        <h2>
            Validate Email ID in ASP.NET
        </h2>
        <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    </form>

Here is the the design what it looked in browser.

We have simply put a textbox where user is supposed to enter Email ID and when press Submit button to save data, we will check either it is valid or not before saving to database.

Code to Validate Email using JavaScript Function

Lets come to JavaScript task now. Add a JavaScript function in your head section of form.

        <script lang="javascript" type="text/javascript">
        function ValidateRegForm() {
            var email = document.getElementById("<%=txtEmail.ClientID%>");
            var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
            if (!filter.test(email.value)) {
                alert('Please provide a valid email address');
                email.focus;
                return false;
            }
            return true;
        }
    </script>

Now add a more event in Submit button code to validate email ID. We can execute Client side function with the help of OnClientClick event provided in ASP.NET framework. Now submit button code will be similar like below.

When to trigger above function to Validate Email function.

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return ValidateRegForm();" />

Ok, lets run the page and click on submit button after entering something that is not email ID.

We have entered a valid email ID after this, and hit the Submit button, it worked perfectly. Give it a try. If you find this article useful, share with your friends. Do not forget to subscribe us on YouTube.