In this article I will explain how to dynamically change the error message of ASP.Net Custom Validator using JavaScript.
In order to illustrate the functioning with an example, I have created a simple form where a person has to enter either Phone Number or Cell Number and based on what he chooses the validation message of the ASP.Net CustomValidator is dynamically changed using JavaScript.
HTML Markup
In the below HTML Markup I have a RadioButtonList to allow user choose whether he has to enter Phone Number or Cell Number, and there is a TextBox for each of the respective Phone and Cell Number and a CustomValidator for which I have set the ErrorMessage property as blank string.
<table cellpadding="2" cellspacing="2">
<tr>
<td>
<asp:RadioButton ID="rbPhoneNumber" Text="Phone Number" runat="server" GroupName="ContactNumber" />
</td>
<td>
<asp:TextBox ID="txtPhoneNumber" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="rbCellNumber" Text="Cell Number" runat="server" GroupName="ContactNumber" />
</td>
<td>
<asp:TextBox ID="txtCellNumber" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:CustomValidator runat="server" Display="Dynamic"
ForeColor="Red" ClientValidationFunction="ContactNumberValidation" ErrorMessage=""></asp:CustomValidator>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" />
</td>
</tr>
</table>
Dynamically changing the error message of ASP.Net Custom Validator using JavaScript
Below is the client side JavaScript validation function which is executed by the CustomValidator.
Note: The CustomValidator is rendered as HTML SPAN and hence I am making use of innerHTML property to set the error message.
Initially I am setting a generic error message which will be raised when user has not chosen the phone number type from the RadioButtonList.
Then based on what he chooses i.e. Phone number or Cell number he will see the respective error message when he leaves the corresponding TextBox empty.
<script type="text/javascript">
function ContactNumberValidation(sender, args) {
sender.innerHTML = "Please select at least one contact number.";
if (document.getElementById("<%=rbPhoneNumber.ClientID %>").checked) {
sender.innerHTML = "Please enter your phone number.";
args.IsValid = document.getElementById("<%=txtPhoneNumber.ClientID %>").value != ""
} else if (document.getElementById("<%=rbCellNumber.ClientID %>").checked) {
sender.innerHTML = "Please enter your cell number.";
args.IsValid = document.getElementById("<%=txtCellNumber.ClientID %>").value != ""
} else {
args.IsValid = false;
}
}
</script>
Screenshots
1. Error message when no selection is made
![Dynamically change the error message of ASP.Net CustomValidator using JavaScript]()
2. Error message when Phone number is selected and its corresponding Textbox is left empty
![Dynamically change the error message of ASP.Net CustomValidator using JavaScript]()
3 Error message when Phone number is selected and its corresponding Textbox is left empty
![Dynamically change the error message of ASP.Net CustomValidator using JavaScript]()
Demo
Downloads
