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

Showing Error Style Programmatically?

10 Answers 534 Views

Input

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

10 Answers, 1 is accepted

Accepted

answered on 31 Dec 2008, 01:08 PM

Hello,

RadTextBox does not have a built-in validation, so normally the control does not display its "invalid" style (only RadNumericTextBox, RadMaskedTextBox and RadDateInput display this style).

There is a way to trick the RadTextBox control and make it display its "invalid" style, however, as far as I can see, Brian wants to apply the built-in "empty" style when the control contains an invalid value.

Here is an example, which shows two different ways to make a RadTextBox use its skin's embedded "empty" style when the control's value is not valid (custom validation is required in both scenarios).

    
            <%@ Page Language="C#" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <p>Enter a value and blur the textbox (or press the button):</p> 
        
            <telerik:RadTextBox 
        
                ID="RadTextBox1" 
        
                runat="server" 
        
                Skin="Web20" /> 
        
            <asp:CustomValidator 
        
                ID="CustomValidator1" 
        
                runat="server" 
        
                ControlToValidate="RadTextBox1" 
        
                ClientValidationFunction="MyValidation" 
        
                ErrorMessage="My Error Message" 
        
                EnableClientScript="true" 
        
                Display="Dynamic" 
        
            /> 
        
            <script type="text/javascript"> 
        
            function MyValidation(source, arguments) 
        
            { 
        
                var textbox = $find(source.controltovalidate); 
        
                if (textbox) 
        
                { 
        
                    if (textbox.get_value() != "valid value") 
        
                    { 
        
                        textbox.get_styles().EnabledStyle[1] += " riEmpty"; 
        
                        textbox.updateCssClass(); 
        
                        arguments.IsValid = false; 
        
                    } 
        
                    else 
        
                    { 
        
                        textbox.get_styles().EnabledStyle[1] = textbox.get_styles().EnabledStyle[1].replace("riEmpty", ""); 
        
                        textbox.updateCssClass(); 
        
                        arguments.IsValid = true; 
        
                    } 
        
                } 
        
            } 
        
            </script> 
        
            <br /><br /> 
        
            <asp:Button ID="Button1" runat="server" Text="PostBack" /> 
        
            <br /><br /> 
        
            <p>Enter a value and blur the textbox (DO NOT press the button):</p> 
        
            <telerik:RadTextBox 
        
                ID="RadTextBox2" 
        
                runat="server" 
        
                Skin="Web20" 
        
                ClientEvents-OnValueChanged="MyValueChanged" /> 
        
            <script type="text/javascript"> 
        
            function MyValueChanged(sender, args) 
        
            { 
        
                if (sender.get_value() != "valid value") 
        
                { 
        
                    sender.get_styles().EnabledStyle[1] += " riEmpty"; 
        
                    sender.updateCssClass(); 
        
                } 
        
                else 
        
                { 
        
                    sender.get_styles().EnabledStyle[1] = textbox.get_styles().EnabledStyle[1].replace("riEmpty", ""); 
        
                    sender.updateCssClass(); 
        
                } 
        
            } 
        
            </script> 
        
            </form> 
        
            </body> 
        
            </html>

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 06 Oct 2009, 07:05 AM

Hello Ashley,

Yes, a similar trick exists for RadInputManager. Note that after setting the textbox to be invalid, you need to take care of switching back the flag afterwards, e.g. by using the Blur event.

    
            <%@ Page Language="C#" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadInputManager ID="RadInputManager1" runat="server"> 
        
                <telerik:NumericTextBoxSetting> 
        
                    <ClientEvents OnBlur="restoreState" /> 
        
                    <TargetControls> 
        
                        <telerik:TargetInput ControlID="TextBox1" /> 
        
                    </TargetControls> 
        
                </telerik:NumericTextBoxSetting> 
        
            </telerik:RadInputManager> 
        
            <asp:TextBox ID="TextBox1" runat="server" /> 
        
            <br /><br /> 
        
            <a href="#" id="myLink">change look</a> 
        
            <script type="text/javascript"> 
        
            function changeLook(e) 
        
            { 
        
                var tb = $find("<%= RadInputManager1.ClientID %>").get_targetInput("<%= TextBox1.ClientID %>"); 
        
                tb.get_owner()._inputs[tb._id]._invalid = true; 
        
                tb.updateCssClass(); 
        
                e.preventDefault(); 
        
            } 
        
            $addHandler($get("myLink"), "click", changeLook); 
        
            function restoreState(sender, args) 
        
            { 
        
                args.get_targetInput().get_owner()._inputs[args.get_targetInput()._id]._invalid = false; 
        
            } 
        
            </script> 
        
            </form> 
        
            </body> 
        
            </html>

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 05 Jan 2011, 04:31 PM

Using a similar technique to the above, I'm trying to suppress validation error until further input is performed. Therefore, I'm handling the validating event and setting valid to false. It works fine for a TextBoxSetting element. However, there is different behavior for a RegExpTextBoxSetting element. It seems the reg ex is always evaluated even though I try to set it valid.

Using this code:
1) if I tab out of the first text box, the textbox stays valid even though it's required.
2) if I tab out of the second text box, the textbox is INVALID even though I try to set it valid in the validating event.

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls for ASP.NET AJAX</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadInputManager ID="RadInputManager1" runat="server">

<telerik:TextBoxSetting Validation-IsRequired="true" EmptyMessage="TextBoxSetting" >

<ClientEvents OnValidating="validating" />

<TargetControls>

<telerik:TargetInput ControlID="TextBox1" />

</TargetControls>

</telerik:TextBoxSetting>

<telerik:RegExpTextBoxSetting Validation-IsRequired="true" EmptyMessage="RegExpTextBoxSetting" ValidationExpression="^((0[0-9])|(1[0-2])|(2[1-9])|(3[0-2])|(6[1-9])|(7[0-2])|80)([0-9]{7})$" >

<ClientEvents OnValidating="validating" />

<TargetControls>

<telerik:TargetInput ControlID="TextBox2" />

</TargetControls>

</telerik:RegExpTextBoxSetting>

</telerik:RadInputManager>

<asp:TextBox ID="TextBox1" runat="server" /> <a href="#" id="myLink">Set TextBoxSetting Invalid</a>

<br /><br />

<asp:TextBox ID="TextBox2" runat="server" /> <a href="#" id="mylink2">Set RegExpTextBoxSetting Invalid</a>

<script type="text/javascript">

function validating(sender, args) {

// set valid

//alert("Error: " + sender.get_id());

var tb = $find(sender.get_id());

tb._invalid = false;

args.set_cancel(true);

}

function setInvalid(e) {

var tb = $find("<%= RadInputManager1.ClientID %>").get_targetInput("<%= TextBox1.ClientID %>");

tb.get_owner()._inputs[tb._id]._invalid = true;

tb.updateCssClass();

e.preventDefault();

}

function setInvalid2(e) {

var tb = $find("<%= RadInputManager1.ClientID %>").get_targetInput("<%= TextBox2.ClientID %>");

tb.get_owner()._inputs[tb._id]._invalid = true;

tb.updateCssClass();

e.preventDefault();

}

$addHandler($get("myLink"), "click", setInvalid);

$addHandler($get("mylink2"), "click", setInvalid2);

</script>

</form>

</body>

</html>

answered on 11 Jan 2011, 11:39 AM

SimpleGrid87.zip

Hello Brian,

Attached is a modified version of your sample that demonstrates how to implement your couple of requirements.

Hope it helps.

Greetings,
Tsvetoslav
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Showing Error Style Programmatically?

10 Answers, 1 is accepted