In this article I will explain with an example, how to display the validation failed Error Messages like
RequiredFieldValidator,
RegularExpressionValidator,
CompareValidator,
RangeValidator and
CustomValidator inside the
TextBox control using
jQuery in ASP.Net.
HTML Markup
The HTML Markup consists of following controls:
TextBox – For capturing user input.
RequiredFieldValidator – For validating the control.
The RequiredFieldValidator has been assigned with following property:
ControlToValidate – For specifying the ID of the control being validated.
RegularExpressionValidator – For validating the user input.
The RegularExpressionValidator has been assigned with following properties:
ControlToValidate – For specifying the ID of the control being validated.
Name:<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:<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="RegularExpressionValidator1" runat="server" ErrorMessage="Invalid Email Address" ControlToValidate="txtEmail"
CssClass="Validators" Display="Dynamic" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
<hr />
Age:<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="btnSubmit" runat="server" Text="Submit" />
Applying jQuery Float plugin
Inside the HTML Markup, the following script file is inherited.
1. jquery.min.js
2. Float.js
Inside the
jQuery document ready event handler, the
Float function is applied to all the Validation controls.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/Float.js" ></script>
<script type="text/javascript">
$(function() {
$(".Validators").Float();
});
</script>
Screenshot
![Display ASP.Net Validators (RequiredFieldValidator) Validation Error Messages inside TextBox Control]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
