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?

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

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.

TextBox Validation

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.

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_.-])[email protected](([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();" />

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

FormCheck

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.

Have any Question or Comment?

One comment on “Validate Email ID in ASP.NET TextBox using JavaScript

Tushar soni

Nice Blog Post!
I love your knowledge sharing post and explanation is the top quality. here you shared code is perfect for validation for emailID.

Thanks for sharing!!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *