RadTextBox/MaskedTextBox backcolor change on client validation fail

4 posts, 0 answers
  1. Forrest
    Forrest avatar
    2 posts
    Member since:
    Nov 2010

    Posted 08 Feb 2011 Link to this post

    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.
  2. Martin
    Admin
    Martin avatar
    833 posts

    Posted 14 Feb 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Forrest
    Forrest avatar
    2 posts
    Member since:
    Nov 2010

    Posted 14 Feb 2011 Link to this post

    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"));
    });
  4. Martin
    Admin
    Martin avatar
    833 posts

    Posted 17 Feb 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top