In this article I will explain how we can display the validation failed error messages of ASP.Net Validator controls like RequiredFieldValidator, RegularExpressionValidator, CompareValidator, RangeValidator and CustomValidator inside the ASP.Net TextBox control using jQuery.
Configuration can be done in 3 easy steps.
1. Set the Display property of all Validators to Dynamic. (Display="Dynamic").
2. Set the CssClass property of all the Validators to Validators. (CssClass="Validators").
3. Finally inherit the jQuery and Float Jscript (JS) files and write the following jQuery script to apply the plugin.
That's all you need to do to display validation failed error messages of ASP.Net Validator inside the ASP.Net TextBox control.
The complete HTML Markup is provided below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/Float.js" type="text/javascript"></script>
<script type = "text/javascript">
$(function () {
$(".Validators").Float();
});
</script>
</head>
<body style = "font-family:Arial;font-size:10pt">
<form id="form1" runat="server">
Name: (Required)<br />
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" CssClass="Validators"
Display="Dynamic" ControlToValidate="txtName" runat="server"
ErrorMessage="Name is required."></asp:RequiredFieldValidator>
<hr />
Email: (Required and Valid Email Address)<br />
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" CssClass="Validators"
Display="Dynamic" ControlToValidate="txtEmail" runat="server"
ErrorMessage="Email is required."></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator6" runat="server"
ErrorMessage="Invalid Email Address"
ControlToValidate="txtEmail" CssClass="Validators" Display="dynamic"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</asp:RegularExpressionValidator>
<hr />
Age: (Required and Range 18 - 45)<br />
<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" CssClass="Validators"
Display="Dynamic" ControlToValidate="txtAge" runat="server"
ErrorMessage="Age is required."></asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator1" CssClass="Validators" Display="Dynamic"
MinimumValue="18" MaximumValue="45" Type="Integer" ControlToValidate="txtAge"
runat="server" ErrorMessage="Age Range 18 to 45"></asp:RangeValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
</form>
</body>
</html>
