Showing Error Style Programmatically?

11 posts, 1 answers
  1. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 30 Dec 2008 Link to this post

    Hello,

    When leaving a text box empty, the RadTextBox has a nice style that appears... I was wondering if it was possible to programmably trigger that myself; whenever the input I validate is invalid, I want to trigger that error style to let the user know of a problem.

    Is that possible through setting the className attribute or by a JS method?

    Thanks.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 Dec 2008 Link to this post

    Hello Brian,

    You can use the InvalidStyle property as shown below to set custom style for the invalid state of RadTextBox control
    aspx:
    <telerik:RadTextBox EmptyMessage="please enter a text" ID="RadTextBox1" runat="server"
       <InvalidStyle BackColor="Red" />                     
    </telerik:RadTextBox> 

    Thanks
    Princy.





  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 31 Dec 2008 Link to this post

    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.
  5. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 31 Dec 2008 Link to this post

    Hello,

    I went with the riError style instead; riEmpty really didn't do anything that I could tell (at least visually), but riError worked using the get_styles approach.

    Thanks.
  6. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 31 Dec 2008 Link to this post

    Dimo,

    Just out of curiosity, why is it EnabledStyle[1]?  Are there multiple styles, or do you deal with all of the styles this way?

    Thanks.
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 31 Dec 2008 Link to this post

    Hi Brian,

    EnabledStyle[0] contains the custom CSS styles for the given state (e.g. width, height, border, font, etc), while EnabledStyle[1] contains the CSS classes for this state.

    Greetings,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. ADH
    ADH avatar
    45 posts
    Member since:
    Nov 2006

    Posted 05 Oct 2009 Link to this post

    Is there a RadInputManager version of this trick?
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 06 Oct 2009 Link to this post

    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 /> 
     
    <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.
  10. BrianS
    BrianS avatar
    25 posts
    Member since:
    Sep 2006

    Posted 05 Jan 2011 Link to this post

    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"
      
    <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>
  11. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 10 Jan 2011 Link to this post

    Hello Brian,

    We shall need some more time to look into the issues you have encountered.

    Regards,
    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.
  12. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 11 Jan 2011 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017