Enable / Disable Validator controls from Javascript

Scenario:

Say you want to enable asp.net validator control upon checkbox check and disable it upon checkbox uncheck. Here is code to do that uses jquery to find the validator control. Nothing fancy but just thought to put it in one place:

Markup in question:

 <input type="checkbox" onclick="toggleValidators(this,['RequiredFieldValidator1','RequiredFieldValidator2'])" />
             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ErrorMessage="rbVsTest" ControlToValidate="TextBox1" Enabled="false">
            </asp:RequiredFieldValidator><br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
            ErrorMessage="rbVsTest" ControlToValidate="TextBox2" Enabled="false">
            </asp:RequiredFieldValidator>

 Initially the validators are disabled i.e. Enabled="false"

You pass two parameters to toggleValidators method: the checkbox reference i.e. "this" and an array that contains ID of all the validators that needs to be toggled.

Add Reference to jQuery:

Add reference to your jQuery in the head section of your page. I am reference it via Microsoft CDN but you can use local or other CDNs.

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js " type="text/javascript"></script>
 

JavaScript function:

     function toggleValidators(chb, validatorsarray)
     {
        for (i = 0; i < validatorsarray.length; i++) 
        {   var enable = chb.checked;
            var validatorid = $("[id$='_" + validatorsarray[i] + "']").attr('id');
            val = document.getElementById(validatorid);
            ValidatorEnable(val, enable);
        }
    }

This is the core function. The function loops through the validators ids we passed in the array and finds the validator element. Then calls ValidatorEnable method to set it to enable or disable based on checkbox checked state.

The above code assumes your Validator controls are inside of some other controls and so I am doing this:

           var validatorid = $("[id$='_" + validatorsarray[i] + "']").attr('id');
            val = document.getElementById(validatorid);

Now if your validator controls are not inside any other control then the method changes a bit like below and you don't even need jquery.

 function toggleValidators(chb, validatorsarray)
     {
        for (i = 0; i < validatorsarray.length; i++)
        {   var enable = chb.checked;
            val = document.getElementById(validatorsarray[i]);
            ValidatorEnable(val, enable);
        }
    }

Conclusion:

I know the post is not that interesting but I wanted to log this somewhere and so it's here.

Let me know if you have any questions.