How to Display ASP.NET Validators Validation Error Messages Inside TextBox Control

Do you know that you can display the validation failed error messages of ASP.NET Valdatorcontrols inside ASP.NET Textbox control using JQuery? This tutorial is possible for ASP.NET Validator controls like RegularExpressionsValidator, CompareValidator, RangeValidator, RequiredFieldValidator, and CustomValidator.

Configure you code in just three steps:

1. Set the display property of all Validators to Dynamic
2. Set the CSSClass property of all validators to Validators
3. Inherit JQuery and Float JScript (JS) and write the JQuery script.

Then complete the HTML markup using this code:

<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>

Leave a Reply

Your email address will not be published. Required fields are marked *