It is a common requirement to validate different fields on an ASP.NET form based on different conditions, for instance, if user selects “Other” from a Drop Down List, then he/she will be required to type in something in a TextBox control. It can be done easily in code behind, but can we accomplish the same task at the client side? The answer is yes. We can use ASP.NET validation’s client API to conditionally enable/disable validators. Here is how:
1. Requirements
First, let’s create a simple ASP.NET form as follows:
When “No” is selected from the radio button list, then a valid date is required to be entered in the first text box, otherwise, the text box is optional. If “Other” is selected from the occupation drop down list, then the second text box is required, otherwise, it is optional.
2. Solution
ASP.net validation script has a function called “ValidatorEnable(val, enable)” which can be used to enable or disable a specific validator. So we can use some JavaScript along with this function to toggle on or off validators based on the conditions.
Here is the JavaScript code:
<script type="text/javascript"> function toggleValidator() { var rbl = document.getElementById('<%=rblFirstTimeVisit.ClientID %>'); var val = document.getElementById('<%=rfvFirstTimeVisit.ClientID %>'); var valReg = document.getElementById('<%=revVisitTime.ClientID %>'); var inputs = rbl.getElementsByTagName("input"); for(var i=0; i<inputs.length; i++) { if (inputs[i].checked) { if (inputs[i].value == "No") { //Enable validators ValidatorEnable(val, true); ValidatorEnable(valReg, true); } else { //Disable validators ValidatorEnable(val, false); ValidatorEnable(valReg, false); } } } var ddl = document.getElementById('<%=ddlOccupation.ClientID %>'); var val1 = document.getElementById('<%=rfvOccupationOther.ClientID %>'); for (var j=0; j<ddl.options.length; j++) { if (ddl.options[j].selected) { if (ddl.options[j].text == "Other") { //Enable validator ValidatorEnable(val1, true); } else { //Disable validator ValidatorEnable(val1, false); } } } } </script>
Now, all we need to do is to add “>
You can check the demo to see how it works.