How to disable validation group with JavaScript?

събота, 10 ноември 2007 г.

Hi again!
I haven’t blogged from a long time ago – I haven’t had enough time to do all of the stuff that I wanted. But now (at last :-)) I have time for my blog. There are a lot of ideas/problems which I want to share with you! So let’s go to the first one.

What is the problem?
These days comes up the need to disable a bunch of validators on the client side. For example imagine that you have a checkbox which shows/hides a number of textboxes. When the checkbox is checked the user is able to fill the boxes (thus validation is required) and on the other hand when he can’t see/fill the boxes, validators should be turned off. I tried to find an example of how to disable ValidationGroup with JavaScript but I couldn’t.

How we can fix this?
Ok guys let’s solve the problem ourselves. The idea is very simple and straightforward.
1. We have a function provided by Microsoft ValidatorEnable(validator, isEnable) which takes a validator and whether it should be enabled/disabled.
2. What else we have? If we look at the rendered html of a page that contains at least one validator, we will see that all of them are elements of the array Page_Validators.
3. The third thing which we have is the property of each validator named validationGroup.

Now we know how to enumerate all validators in a page, how to enable/disable particular validator and how to ask a validator whether it is part of particular validationGroup. Thus we have enough knowledge to solve the problem.
Below is sample code of an .aspx file. In it you will see two text boxes. Both have required field validator. The second has regular expression validator, too. I have made groups for the validators from a particular type. There are two buttons – the one which enables the required field validators group and the other to disable it. The two buttons call my custom function named (accordingly to Microsoft convension) ValidationGroupEnable. The function enumerates all page’s validators and if a validator is from the given validation group it is enabled/disabled according to the value given to isEnabled. Internally the function HasPageValidators fixes the situation when we doesn’t have any validators (the problem here is that when you don’t have any validators Page_Validators array is not defined and if you try to use it there will be an error).

The code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >
<head id="Head1" runat="server">

<title>Enable/Disable validation group with JavaScript</title>

<script type="text/javascript">
function HasPageValidators()
var hasValidators = false;

if (Page_Validators.length > 0)
hasValidators = true;
catch (error)

return hasValidators;

function ValidationGroupEnable(validationGroupName, isEnable)
if (HasPageValidators())
for(i=0; i < Page_Validators.length; i++)
if (Page_Validators[i].validationGroup == validationGroupName)
ValidatorEnable(Page_Validators[i], isEnable);

<form id="form1" runat="server">

<input type="button" value="Disable required field validators!"
onclick="ValidationGroupEnable('vgRequiredFields', false)" />

type="button" value="Enable required field validators!"
onclick="ValidationGroupEnable('vgRequiredFields', true)" />

<td style="width: 229px">
<asp:Label ID="lblName" runat="server" Text="Name: " /><asp:TextBox ID="txtName" runat="server" />

<asp:RequiredFieldValidator ID="rfvName" runat="server"
ErrorMessage="*" ControlToValidate="txtName"
ValidationGroup="vgRequiredFields" /></td>

<td style="width: 229px">
<asp:Label ID="lblEmail" runat="server" Text="Email: " /><asp:TextBox ID="txtEmail" runat="server"/>

<asp:RequiredFieldValidator ID="rfvEmail" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationGroup="vgRequiredFields" />

<asp:RegularExpressionValidator ID="revEmail" runat="server"
ErrorMessage="!" ControlToValidate="txtEmail" ValidationGroup="vgRegularExpressions"

ValidationExpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$" /></td>



Hope this helps :-).
P.S. DD you now have what you needed. Keep up the good work! ;-)

Vesko Kolev's Blog : IDeveloper -