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
 
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
 
<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>
 
That’s all you need to do to display validation failed error messages of ASP.Net Validator inside the ASP.Net TextBox control.
 
 
 
Screenshot
 
Display ASP.Net Validator Validation Error Messages within TextBox Control
 
 
HTML Markup
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>
 
 
Demo
 
Downloads


The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.