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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">

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

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

try
{
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);
}
}
}
}
</script>


</head>
<body>
<form id="form1" runat="server">
<div>

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

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

<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>


</tr>
<tr>
<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>
</tr>
</table>
</div>

</form>
</body>
</html>

Conclusion

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

ASP.NET LinkButton - when disabled renders not a valid xHTML.

четвъртък, 26 юли 2007 г.

What is the problem with LinkButton control in ASP.NET?
When you disable a LinkButton i.e. set Enabled="false", ASP.NET renders disabled="disabled" which is not a valid xHTML property.

How we can fix this?
If you view the source code of the LinkButton control and more specific the AddAttributesToRender method, you will notice that it adds the disabled attribute when Enabled is set to false. The second thing you will see there is that no matter you have set or not the PostBackUrl property to string.Empty, the method renders href property and link postbacks i.e. every time when the LinkButton is Enabled.

So what functionality does we have to achieve? When the LinkButton is disabled, we get these five things:

0. Get rid of the disabled="disabled" property.
1. The link must not be clickable (=> there will be no postback).
2. The cursor is not a hand, but as the thing under is simple text (=> the user will not expect that it is clickable ).
3. We have no underlining.
4. The color is grey as a disabled link. Here I'll add, that if you want to make it more flexible for design, you can set a css class name in which designers can add the appropriate color.

Therefore the thing which will have to do are respectively:
0. Set control's Enabled property to true.
1. Set the PostBackUrl to javascript:void(0).
2. Set the cursor to be of type text.
3. Set the text-decoration to none.
4. Set the color to grey.

As in my previous post which you can find here, we will achieve this with the help of control adapters. Here is a sample source code:



Conclusion
This solution shows again the power of control adapters - properly rendered controls of some type in the whole web site just with a few lines of code.

ASP.NET CheckBox - rendering not compatible with WAI.

събота, 14 юли 2007 г.

What is WAI?
WAI stands for Web Accessibility Initiative. It's an attempt of W3C to improve the accessibility of WWW with different user agent devices which is especially important for people with physical disabilities. WAI is an number of guidelines that can help to make WWW more accessible. For more information look at here.

What is the problem with CheckBox control in ASP.NET?
The problem is that WAI suggests that controls such as text boxes, images, buttons etc. must have tooltips. So when you add a ToolTip property of a asp:CheckBox control, ASP.NET renders wrapping span and set's the tooltip to the span. But as I mentioned above WAI requires an alt(title) tag for every INPUT and when you try to validate a page with a checkbox the validation will fail.

How we can fix this?
As my friend and colleague Stefan Dobrev recently rightly pointed, Microsoft ASP.NET Team done their work excellent and in ASP.NET 2.0 they have provided very elegant solution for such problems - Control Adapters. (For more information about the architecture of control adapters look at this post)

To use control adapter, we have to create the standard folder named App_Browsers and in it we have to add a file with extension .browser - the so called Browser definition file. This is the content of the file in my example:



In the file we add section in which we add an adapter for control of type System.Web.UI.WebControls.CheckBox and we associated the adapter CheckBoxCtrlAdapter which is defined as below:


Thus all of the checkboxes in your page will render WAI compatible.

Conclusion
For many people WAI is very restrictive and in some ways hard achievable and even unnecessary. I think that at least easily achievable features should be observed. The future will show whether WAI will become a wide spred standard.

My first post

Welcome to my blog! Here you will find different information about Software development - C#, .NET, ASP.NET, Java, C/C++, Win32 API, Design Patterns, Algorithms, Best practices and many other. Of course here I will post my general thoughts, too.
I hope that it will be useful to many people!
Wish me good luck! :-)

 
Vesko Kolev's Blog : IDeveloper -