RadTextBox/MaskedTextBox backcolor change on client validation fail

[Forrest]

Hello,

So far I've found the threads here invaluable in the month that I have been using Telerik controls. Unfortunately I find myself in a situation where I cannot find an answer in an existing thread although I've tried to piece some solutions together.

I am using asp.net RegularExpressionValidators and RequiredFieldValidators when needed and they are set to display dynamically. My first task was to shade the invalid rad boxes when they are invalid. I accomplished this by using <ClientEvents>  then setting the enabled style and calling updateCssClass. This is working great. The problem I am having now is that when the submit button is clicked, the client validation is firing but I can no longer set the background color. I'm using the onClientClick then looping through the validators and the rad input controls but I must be doing something wrong. When I step through the javascript I can see the EnabledStyle get set and the updateCssClass get called just like what is working when the individual textboxes work.

I'm only including one textbox in the aspx example for brevity.
Here is the code:

Javascript

function ValidateOnSubmit()
{
    var allRadControls = $telerik.radControls;
    var isValid = true;
    for (var i = 0; i < Page_Validators.length; i++)
    {
        var val = Page_Validators[i];
        ValidatorValidate(val, "all");
        if (!val.isvalid)
        {
            isValid = false;
            for (var y = 0; y < allRadControls.length; y++)
            {
                if (val.controltovalidate == allRadControls[y]._clientID)
                {
                    allRadControls[y].get_styles().EnabledStyle[0] += "background-color: LightPink;";
                    allRadControls[y].updateCssClass();
                }
            }
        }
        else
        {
            isValid = true;
        }
    }
}

ASPX

<telerik:RadTextBox ID="radtbEmailAddress" runat="server" MaxLength="256" ValidationGroup="all" EmptyMessage="Enter Email Address" Width="225px">
<ClientEvents OnValueChanged="ValidatePage" /></telerik:RadTextBox><asp:RegularExpressionValidator
           id="revEmail"
           runat="server"
           ErrorMessage="Please, enter valid e-mail address."
           ValidationExpression= "^((?:(?:(?:[a-zA-Z0-9][\!\#\$\%\&\'\*\/\=\?\^\`\{\|\}\~\.\-\+_]?)*)[a-zA-Z0-9])+)\@((?:(?:(?:[a-zA-Z0-9][\!\#\$\%\&\'\*\/\=\?\^\`\{\|\}\~\.\-\+_]?){0,62})[a-zA-Z0-9])+)\.([a-zA-Z0-9]{2,6})$"
           ControlToValidate="radtbEmailAddress" ForeColor="Red" Display="Dynamic" ValidationGroup="all" >
</asp:RegularExpressionValidator><asp:RequiredFieldValidator ID="rfvEmailAddress" runat="server" ForeColor="Red" ControlToValidate="radtbEmailAddress" Display="Dynamic" ValidationGroup="all" ErrorMessage="Please enter an email address"></asp:RequiredFieldValidator>
<br />

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="ValidateOnSubmit();" OnClick="btnSubmit_Click" CssClass="brown" CausesValidation="true" ValidationGroup="all" />

Any help is greatly appreciated!

Edit: I've also tried to use WebForm_OnSubmit() but that doesn't work either. When using Developer Tools in IE to look at the markup, the css is being overwritten by the time I see it.

[Martin]

Hello Forrest,

I would suggest that you implement a closure and execute the updateCssClass() method with a little delay:

function ValidateOnSubmit()
{
    var allRadControls = $telerik.radControls;
    var isValid = true;
    for (var i = 0; i < Page_Validators.length; i++)
    {
        var val = Page_Validators[i];
        ValidatorValidate(val, "all");
        if (!val.isvalid)
        {
            isValid = false;
            for (var y = 0; y < allRadControls.length; y++)
            {
                if (val.controltovalidate == allRadControls[y]._clientID)
                {
                    allRadControls[y].get_styles().EnabledStyle[0] += "background-color: LightPink;";
                    setTimeout((function (control) { return function () { control.updateCssClass(); } })(allRadControls[y]), 1);
                }
            }
        }
        else
        {
            isValid = true;
        }
    }
}

I hope this helps.

Best wishes,
Martin
the Telerik team

[Forrest]

Hello Martin,

Thank you for the suggestion. Unfortunately when that line is added, the function for the individual radtextbox ClientEvents stops working. I'm using OnValueChanged to call this function:

function ValidatePage(sender)
    {

        //disable hovering effects (which remove the background shading of textbox)
        if (typeof (Telerik) != "undefined" && typeof (Telerik.Web.UI.RadInputControl) != "undefined")
        {
            Telerik.Web.UI.RadInputControl.prototype.updateCssClass_Old = Telerik.Web.UI.RadInputControl.prototype.updateCssClass;

            Telerik.Web.UI.RadInputControl.prototype.updateCssClass = function ()
            {
                this._hovered = false;
                this.updateCssClass_Old();
            }
        }

        var allRadControls = $telerik.radControls;
        var isValid = true;
        for (var i = 0; i < Page_Validators.length; i++)
        {
            var val = Page_Validators[i];
            //make sure the validator is the one wired to sender, otherwise it validates all
            if (val.controltovalidate == sender._clientID)
            {
                ValidatorValidate(val, "all");


                if (!sender.isvalid)
                {
                    isValid = false;

                            sender.get_styles().EnabledStyle[0] += "background-color: LightPink;";

                            sender.updateCssClass();
                            sender._hovered = false;

                }
                else
                {
                    isValid = true;
                }
            }
        }
        return isValid;
    }

The error is ValidatePage is undefined and it is happening here in the debugging:

$create(Telerik.Web.UI.RadTextBox, {"_focused":false,"_postBackEventReferenceScript":"setTimeout(\"__doPostBack(\\\u0027ctl00$MainContent$radtbEmailAddress\\\u0027,\\\u0027\\\u0027)\", 0)","_skin":"Default","clientStateFieldID":"ctl00_MainContent_radtbEmailAddress_ClientState","emptyMessage":"Enter Email Address","enabled":true,"styles":{HoveredStyle: ["width:225px;", "riTextBox riHover"],InvalidStyle: ["width:225px;", "riTextBox riError"],DisabledStyle: ["width:225px;", "riTextBox riDisabled"],FocusedStyle: ["width:225px;", "riTextBox riFocused"],EmptyMessageStyle: ["width:225px;", "riTextBox riEmpty"],ReadOnlyStyle: ["width:225px;", "riTextBox riRead"],EnabledStyle: ["width:225px;", "riTextBox riEnabled"]}}, {"valueChanged":ValidatePage}, null, $get("ctl00_MainContent_radtbEmailAddress"));
});

[Martin]

Hello Forrest,

I have tried to reproduce the issue locally but without success. Attached to this message is a short video showing the results I get.

Additionally please note that the OnValueChanged event requires an event handler with two parameters. This help article provides more details on the matter. I am also not quite sure that RadTextBox client side object (which you get as first parameter in the handler) provides isvalid property as per your code bellow:

function ValidatePage(sender)
{
...
    if (!sender.isvalid)
    {

    }
...
}

I hope this helps.

Kind regards,
Martin
the Telerik team