Validate Email ID in ASP.NET TextBox using JavaScript

Why to Validate?

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 the wrong email ID, you need 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).

To understand this, we have created a simple example. Let's have a 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 design as it looked in the 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 whether it is valid or not before saving to database.

Let's come to the 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:

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

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.