Never Too Old To Learn
Learning While Aging
Never Too Old To Learn
ASP.NET Tips & Tricks

Conditionally validate form by using ASP.NET validators and JavaScript

Published

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:

2009-07-16_160214

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 “onclick=toggleValidator()” to the radio button list, and “onchange=toggleValidator()” to the drop down list to fire the JavaScript function, and the validators will handle the rest.

You can check the demo to see how it works.

You may also like