In this article I will explain how to display validation error messages of ASP.Net Validators such as RequiredFieldValidator, RegularExpressionValidator, CustomValidator, CompareValidators, etc. in JavaScript Alert Message Box.
ASP.Net has provision to display error messages of ASP.Net Validators in JavaScript Alert Message Box using ValidationSummary control.
Displaying ASP.Net Validator Error Messages in JavaScript Alert Message Box
You need to follow the following steps in order to display the validation error messages of ASP.Net Validators in JavaScript Alert Message Box.
1. Set the Display property of each Validator to None. This is very important in order to hide the error messages of the ASP.Net validators.
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" CssClass="Validators" Display="None" ControlToValidate="txtName" runat="server" ErrorMessage="Name is required."></asp:RequiredFieldValidator>
2. Add a ValidationSummary control and set its ShowMessageBox property to True and ShowSummary property to False.
<asp:ValidationSummary runat="server" ShowMessageBox="true" ShowSummary="false" />
Note: If you are using ValidationGroup property for the Validators then you will have to set the same ValidationGroup value for the ValidationSummary control also.
That’s all you need to do in order to display the validation error messages of ASP.Net Validators such as RequiredFieldValidator, RegularExpressionValidator, CustomValidator, CompareValidators, etc. in JavaScript Alert Message Box.
Below is an example of a Form which displays the validation error messages of ASP.Net Validators in JavaScript Alert Message Box.
Name: (Required)<br />
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" CssClass="Validators" Display="None"
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="None"
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="None" 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="None"
ControlToValidate="txtAge" runat="server" ErrorMessage="Age is required."></asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator1" CssClass="Validators" Display="None"
MinimumValue="18" MaximumValue="45" Type="Integer" ControlToValidate="txtAge"
runat="server" ErrorMessage="Age Range 18 to 45"></asp:RangeValidator>
<br />
<br />
<asp:ValidationSummary runat="server" ShowMessageBox="true" ShowSummary="false" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
Screenshot
![Display ASP.Net Validators (RequiredFieldValidator) Error Messages in JavaScript Alert Message Box]()
Demo
Downloads
