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

Add custom class to RadTextbox when validates fails

1 Answer 380 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Jan
Top achievements
Rank 1
Jan asked on 28 Jan 2010, 03:22 PM
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!


1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Feb 2010, 01:32 PM
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.
Tags
FormDecorator
Asked by
Jan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or