Add custom class to RadTextbox when validates fails

2 posts, 0 answers
  1. Jan
    Jan avatar
    37 posts
    Member since:
    May 2008

    Posted 28 Jan 2010 Link to this post

    Hi,

    I have following issue, i used this approach on previous project. Now with telerik components I dont get effect of higlighted control. Jquery add class to control wich is below that visible one.

    <span id="ctl00_ctl00_BodyBase_ContentPlaceHolder1_DocTitle_wrapper" class="RadInput RadInput_Default" style="white-space: nowrap;"><input size="20" id="ctl00_ctl00_BodyBase_ContentPlaceHolder1_DocTitle_text" name="ctl00_ctl00_BodyBase_ContentPlaceHolder1_DocTitle_text" class="riTextBox riEnabled" style="width: 90%;" type="text"><input id="ctl00_ctl00_BodyBase_ContentPlaceHolder1_DocTitle" name="ctl00$ctl00$BodyBase$ContentPlaceHolder1$DocTitle" class="rdfd_ inputError" style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;" value="" type="text"><input autocomplete="off" id="ctl00_ctl00_BodyBase_ContentPlaceHolder1_DocTitle_ClientState" name="ctl00_ctl00_BodyBase_ContentPlaceHolder1_DocTitle_ClientState" type="hidden"></span> 
             
            <span id="ctl00_ctl00_BodyBase_ContentPlaceHolder1_RequiredFieldValidator1" class="validation-error" style="color: Red; visibility: visible;">&nbsp;</span> 
             

    Its class inputError on second input, but i think i need it on first one. 

    Can you help me to set up css class to input control wich is handled by telerik RadTextbox/RadFormDecorator? 

    Mainly i want show validation summary with listed errors and highlight conflicted controls. Is there some way to do it, when im using RadTextBox/RadFormDecorator?

    Please as small more code as possible. I have many places to edit. Best solution is change Jquery script to add error class to the right input for me. 

    Many Thanks!


  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 02 Feb 2010 Link to this post

    Hi Jan,

    You are right - the CSS class must be set to the first <input> element, which has its ID ending with "_text". The second <input> element holds the RadInput real (unformatted) value and is not visible to the user.

    When setting CSS classes with jQuery, you can distinguish the hidden textboxes by their special CSS class - "rdfd_". Then you can set the CSS class to the input element, which has the same ID as the hidden textbox, but with "_text" at the end.

    Also, you should note that RadInput textboxes save their styles for each state (normal, hovered, focused, etc) and reapply them after each of the mentioned events. In other words, your error CSS class will be removed when the user hovers or focuses the textbox. There are two ways to prevent this.

    1. Use the RadInput's internal error state on the client:

    <%@ 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 runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadInput for ASP.NET AJAX</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <script type="text/javascript">
     
    function RadTextBox1_Validate(sender, args)
    {
        var textbox = $find("<%= RadTextBox1.ClientID %>");
        if (textbox.get_value().length == 0)
        {
            textbox._invalid = true;
            textbox.updateCssClass();
            args.IsValid = false;
        }
        else
        {
            args.IsValid = true;
        }
    }
     
    function ValueChanged(sender, args)
    {
        if (args.get_newValue().length > 0)
        {
            sender._invalid = false;
            sender.updateCssClass();
        }
    }
     
    </script>
     
    <h3>RadTextBox Invalid State with a CustomValidator</h3>
     
    <telerik:RadTextBox runat="server" Skin="Hay" ID="RadTextBox1" ClientEvents-OnValueChanged="ValueChanged" />
     
    <asp:CustomValidator
        ID="CustomValidator1"
        runat="server"
        Text="Error"
        ControlToValidate="RadTextBox1"
        ClientValidationFunction="RadTextBox1_Validate"
        ValidateEmptyText="true" />
     
    <asp:Button ID="Button1" runat="server" Text="Button" />
      
    </form>
    </body>
    </html>


    2. Add (and remove) custom CSS classes like in the following forum post:

    http://www.telerik.com/community/forums/aspnet-ajax/input/add-cssclass-dynamically-to-telerik-rad-input-text-box.aspx#909473


    Greetings,
    Dimo
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top