Introduction:
In this article, we'll explain how to perform email validation on an Asp.Net Textbox control using jQuery. Email validation can be used to avoid entering incorrect email addresses accidentally or unknowingly. In the below image, I show three variants of email validation for better explanation.
Before we go through the in-depth content of this article, I strongly recommend reading my previous article, which is related to jQuery validation.
- Password Validation using jQuery
- Dropdownlist Validation using jQuery
- jQuery Validation on Asp.Net Master Page Control
Overview of Email Validation:
In this article, we'll add textbox server-side control on the asp.net page. This textbox control triggers jQuery code when it loses focus from the textbox.
- First, it will check whether the textbox is null or empty; if that condition is true, then it will throw an error called Please Enter Email ID.
- Second, if the textbox contains some data, it will check if the data is in proper email format or not; if not, it will throw an error called Please Enter Correct Email-ID.
- Third, if the textbox data is in proper email format, then it will give you this message and not an error message. Thank you for entering the correct email ID.
HTML Markup:
In ASP.NET, we design according to our requirements, which are shown in the above image, i.e., adding one server-side textbox and label controls. The textbox is used to enter an email address; if it is in proper format, it will show a success message in label control, or it will show an error message.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Email Address Validation.aspx.cs" Inherits="JQUERY_TUTORIALS_Email_Address_Validation" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
------- ADD JQuery Code Here --------
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td><asp:textbox ID="txtemailID" runat="server"></asp:textbox></td>
</tr>
<tr>
<td><asp:Label ID="lblemailID"
runat="server" Text=""></asp:Label></td>
</tr>
</table>
</div>
</form>
</body>
</html>
JQuery Validation for Email ID:
Now, let's implement the jQuery code that performs the email validation when the user focuses out of the email textbox.
<script type="text/javascript">
$(document).ready(function () {
$('[id$=txtemailID]').focusout(function () {
if ($('[id$=txtemailID]').val() == "") {
$('[id$=lblemailID]').html("Please enter Email ID");
}
if ($('[id$=txtemailID]').val() != "") {
var email = $('[id$=txtemailID]').val();
var filter = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if (filter.test(email)) {
$('[id$=lblemailID]').html("thank for entering Correct Email ID");
}
else {
$('[id$=lblemailID]').html("Please Enter Correct Email-ID Format { abc@xyz.com } ");
}
return false;
}
});
});
</script>
In this article, we used the jQuery focusout event to perform this email validation. focusout will execute whenever the textbox cursor leaves the textbox server. This event will fire, and it will check if the value is null or empty. For this condition, this code will execute.
if ($('[id$=txtemailID]').val() == "") {
$('[id$=lblemailID]').html("Please enter Email ID");
}
If the textbox value is not null or empty, then that value will be stored in this email variable, and the email validation pattern will be stored in the filter object.
The filter object has a pre-defined method called test that will check if the given value is in proper email ID format or not; if it is in proper format, then it will return true, or if not, then it will return false.
if ($('[id$=txtemailID]').val() != "") {
var email = $('[id$=txtemailID]').val();
var filter = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if (filter.test(email)) {
$('[id$=lblemailID]').html("thank for entering Correct Email ID");
}
else {
$('[id$=lblemailID]').html("Please Enter Correct Email-ID Format { abc@xyz.com } ");
}
return false;
}
If the entered value is in the correct email format and the filter pattern is checked and returned as true, then this code will execute.
$('[id$=lblemailID]').html("thank for entering Correct Email ID");
If return false, then this code will execute.
$('[id$=lblemailID]').html("Please Enter Correct Email-ID Format { abc@xyz.com } ");
0 Comments