I am having problems with Validation scripting using telerik controls - css

Question

I hope someone knows the answer to this as I am very new to using Telerik controls. Here is the problem, I have a requirement that says that I have to set the background color for a control attached to a validation control if the IsValid flag was set on the validation control. An earlier requirement that I had may be affecting this as well, it was set focus to the control based on the SetFocusOnError="true".
All of the controls are contained in a asp:UpdatePanel and the page has a master page set.
So what I have done is the following to set focus I overrode the Validate function on the System.Web.UI.Page class as so:
public override void Validate(string group)
{
base.Validate(group);
// get the first validator that failed
var validator = GetValidators(group)
.OfType<BaseValidator>()
.FirstOrDefault(v => !v.IsValid);
// set the focus to the control
// that the validator targets
if (validator != null)
{
//Check to see if SetFocusOnError was set.
if (validator.SetFocusOnError == true)
{
Control target = validator
.NamingContainer
.FindControl(validator.ControlToValidate);
if (target != null)
target.Focus();
}
}
}
This works and sets focus to the control. The next thing that I did was the following inline in my webpage:
var OriginalValidatorUpdateDisplay = null;
if (typeof (ValidatorUpdateDisplay) == 'function') {
OriginalValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NewValidatorUpdateDisplay;
}
function NewValidatorUpdateDisplay(val) {
OriginalValidatorUpdateDisplay(val);
ValidateControls();
}
function ValidateControls() {
if (window.Page_Validators) {
for (var vI = 0; vI < Page_Validators.length; vI++) {
var vValidator = Page_Validators[vI];
if (vValidator.isvalid) {
$("#" + vValidator.controltovalidate).removeClass("error");
if ($("#" + vValidator.controltovalidate).parent().find('.riTextBox').length > 0) {
$("#" + vValidator.controltovalidate).parent().removeClass("error");
}
}
else {
$("#" + vValidator.controltovalidate).addClass("error");
if ($("#" + vValidator.controltovalidate).parent().find('.riTextBox').length > 0) {
$("#" + vValidator.controltovalidate).parent().addClass("error");
}
}
}
}
}
However, when you load the page and submit the page for validation the first time the css doesn't change, but if you do it again it does. Oh and the AddClass is just adding
.error .riTextBox
{
background-color: lightpink !important;
z-index:6001;
}
to the control.
Has anyone worked encountered this before?
Oh I should also note that if I remove the Telerik controls and use asp textbox controls everything works as it should but I can't remove the Telerik controls from the project.