Extending ASP.NET validation on the client side

One of the more annoying shortcomings of standard ASP.NET validation is it's lack of support for extending the the UI on the client side. For example, there is no way to set the css class of the input control when validation fails. I was working on some javascript to fix this when I came across an article that did just about the same thing. Combining my work with Scott's yields a bit more efficient javascript:

ValidatorUpdateIsValid  = function() {
 Page_IsValid =  AllValidatorsValid(Page_Validators);
 SetValidatorStyles();
}

SetValidatorStyles  = function() {
  var i;
  // clear all
  for (i = 0;  i < Page_Validators.length; i++) {
   var inputControl = document.getElementById(Page_Validators[i].controltovalidate);
   if( null != inputControl ) {
     WebForm_RemoveClassName(inputControl, 'error');
   }
 }
  // set invalid
  for (i = 0;  i < Page_Validators.length; i++) {
   inputControl =  document.getElementById(Page_Validators[i].controltovalidate);
   if( null != inputControl && !Page_Validators[i].isvalid ) {
        WebForm_AppendToClassName(inputControl, 'error');
   }
 }
}

ValidatorUpdateIsValid is part of the ASP.NET validation client script. It's invoked once whenever client side validation functions are triggered. For example after a field's value has been opdated (OnChange). This makes it the ideal place to hook into ASP.NEt client side validation. Hooking in to JavaScript is quite easy since in JavaScript any function can be redeclared. The last declaration is the one that is used. By inserting the script in the page content the function ValidatorUpdateIsValid is guaranteed to override the ASP.NET function that is loaded in the page header. I've packaged the script in a control that can be dropped into any (master) page to extend existing validation controls. I'll post the sources and a sample asap.

[11 okt 2010] Updated source code as suggested by Markus.