jQuery to Validate email address using RegularExpression in asp.net

Introduction: In this article i am going to explain how to validate email address/ Id using RegularExpression  in jQuery in asp.net.

Description: In previous articles i explained  How to implement Jquery form validations in asp.net and jQuery to validate file extension and upload image file in asp.net and Example to Validate DropDownList using jQuery and Example to validate asp.net CheckBoxList using jQuery.
validating email address in asp.net using jQuery

This article demonstrates  the jQuery validation to validate email id. It will prompt you to enter the email address if it is left blank on submitting.And if invalid email address is entered then validation will be failed and show error message "Invalid Email Address. Please enter valid email e.g abc@domain.com" and further processing will be stopped.If entered email address is in valid email format then further processing will be done and print the message "Valid Email address" in the label as in this article example. But you can do the processing as required after successfully validating the email address.
  • In the <Head > tag of the design page (.aspx) create the jQuery function to validate the email address.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnValidate").click(function () {
            var EmailId = $("#txtEmailId").val();
            if ($.trim(EmailId).length == 0) {
                alert("Please Enter Email Address");
                return false;
            }
            if (validateEmailAddress(EmailId)) {             
                return true;
            }
            else {
                alert('Invalid Email Address.Please enter valid email e.g abc@domain.com');
                return false;
            }
        });
    });
    function validateEmailAddress(EmailId) {
        var expr = /^[a-zA-Z0-9._]+[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/;
        if (expr.test(EmailId)) {
            return true;
        }
        else {
            return false;
        }
    }
</script>

  • In the <Body> tag place a TextBox control , Button control and Label control as:

<fieldset style="width:300px;">
<legend>Validate Email address Using jQuery in asp.net</legend>
<table>
<tr>
<td>Email Address:</td>
<td><asp:TextBox ID="txtEmailId" runat="server" Width="177px"/></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnValidate" runat="server" Text="Validate"
        onclick="btnValidate_Click" />
    <asp:Label ID="lblStatus" runat="server" Text="" style="color: #009933"></asp:Label>
    </td>
</tr>
</table>
</fieldset>

C#.Net Code  

In the code behind file (.aspx.cs) write the following code on Validate button click event

protected void btnValidate_Click(object sender, EventArgs e)
    {
        lblStatus.Text = "Valid Email Address";
    }

VB.Net Code  
 
First Design the form as shown in C#.net section but just change the line <asp:Button ID="btnValidate" runat="server" Text="Validate" onclick="btnValidate_Click" />
 with the line <asp:Button ID="btnValidate" runat="server" Text="Validate"/>

 In the code behind file (.aspx.vb) write the following code on Validate button click event

Protected Sub btnValidate_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnValidate.Click
        lblStatus.Text = "Valid Email Address"
    End Sub


Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..