This is a migrated thread and some comments may be shown as answers.

RadTextBox/MaskedTextBox backcolor change on client validation fail

3 Answers 220 Views
Input
This is a migrated thread and some comments may be shown as answers.
Forrest
Top achievements
Rank 1
Forrest asked on 09 Feb 2011, 12:21 AM
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.

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 14 Feb 2011, 03:49 PM
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.
0
Forrest
Top achievements
Rank 1
answered on 14 Feb 2011, 08:32 PM
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"));
});
0
Martin
Telerik team
answered on 17 Feb 2011, 05:34 PM
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.
Tags
Input
Asked by
Forrest
Top achievements
Rank 1
Answers by
Martin
Telerik team
Forrest
Top achievements
Rank 1
Share this question
or