Note:- Don't forget to add AjaxControlToolkit dll in your project.
To download the AjaxControlToolkit follow following steps
1. Open Solution Explorer => Right Click on the Project Root
2. Click on Manage NuGet Packages...
3. Search AjaxControlToolkit and Install it.
ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators.
Step 1:- Design Page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<table>
<tr>
<td>Name :</td>
<td>
<asp:TextBox ID="txtName" runat="server" />
<asp:RequiredFieldValidator ID="ReqName" runat="server"
ControlToValidate="txtName"
EnableClientScript="true"
SetFocusOnError="true"
Display="None"
ErrorMessage="Name is required.">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegName" runat="server"
ControlToValidate="txtName"
EnableClientScript="true"
SetFocusOnError="true"
Display="None"
ValidationExpression="^[A-Za-z]+$"
ErrorMessage="Enter only alphabet letters.">
</asp:RegularExpressionValidator>
<ajax:ValidatorCalloutExtender ID="Val1Name" runat="server"
TargetControlID="ReqName"
HighlightCssClass="validatorCalloutHighlight">
</ajax:ValidatorCalloutExtender>
<ajax:ValidatorCalloutExtender ID="Val2Name" runat="server"
TargetControlID="RegName"
HighlightCssClass="validatorCalloutHighlight">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td>Email Id :</td>
<td>
<asp:TextBox ID="txtEmailId" runat="server" />
<asp:RequiredFieldValidator ID="ReqEmailId" runat="server"
ControlToValidate="txtEmailId"
EnableClientScript="true"
SetFocusOnError="true"
Display="None"
ErrorMessage="Email Id is required.">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegEmailId" runat="server"
ControlToValidate="txtEmailId"
EnableClientScript="true"
SetFocusOnError="true"
Display="None"
ValidationExpression="^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$"
ErrorMessage="Invalid Email Id.">
</asp:RegularExpressionValidator>
<ajax:ValidatorCalloutExtender ID="Val1EmailId" runat="server"
TargetControlID="ReqEmailId"
HighlightCssClass="validatorCalloutHighlight">
</ajax:ValidatorCalloutExtender>
<ajax:ValidatorCalloutExtender ID="Val2EmailId" runat="server"
TargetControlID="RegEmailId"
HighlightCssClass="validatorCalloutHighlight">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td>Contact No:</td>
<td>
<asp:TextBox ID="txtContactNo" runat="server" MaxLength="10" />
<asp:RequiredFieldValidator ID="ReqContactNo" runat="server"
ControlToValidate="txtContactNo"
EnableClientScript="true"
SetFocusOnError="true"
Display="None"
ErrorMessage="Contact No is required.">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RagContactNo" runat="server"
ControlToValidate="txtContactNo"
EnableClientScript="true"
SetFocusOnError="true"
Display="None"
ValidationExpression="^[0-9]{10}$"
ErrorMessage="Invalid Contact No. 10 digit required.">
</asp:RegularExpressionValidator>
<ajax:FilteredTextBoxExtender ID="FilContactNo" runat="server"
FilterType="Numbers"
TargetControlID="txtContactNo" />
<ajax:ValidatorCalloutExtender ID="Val1ContactNo" runat="server"
HighlightCssClass="validatorCalloutHighlight"
TargetControlID="ReqContactNo">
</ajax:ValidatorCalloutExtender>
<ajax:ValidatorCalloutExtender ID="Val2ContactNo" runat="server"
HighlightCssClass="validatorCalloutHighlight"
TargetControlID="RagContactNo">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td>DOB:</td>
<td>
<asp:TextBox ID="txtDOB" runat="server" />
<asp:RequiredFieldValidator ID="ReqDOB" runat="server"
ControlToValidate="txtDOB"
EnableClientScript="true"
SetFocusOnError="true"
Display="None"
ErrorMessage="DOB is required.">
</asp:RequiredFieldValidator>
<ajax:CalendarExtender ID="CalDOB" runat="server"
TargetControlID="txtDOB"
Format="dd/MM/yyyy" />
<ajax:ValidatorCalloutExtender ID="Val1DOB" runat="server"
HighlightCssClass="validatorCalloutHighlight"
TargetControlID="ReqDOB">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnRegister" runat="server" Text="Register" OnClick="btnRegister_Click" />
</td>
</tr>
</table>
<br />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
Step 2:- Code behind Page
protected void btnRegister_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
lblMessage.Text = $"You entered the Name : {txtName.Text} Email Id : {txtEmailId.Text} Contact No : {txtContactNo.Text}";
}
}
No comments:
Post a Comment