RadDatePicker change class (border and font color) when validation fails

5 posts, 0 answers
  1. Chris
    Chris avatar
    1 posts
    Member since:
    Jul 2011

    Posted 24 Aug 2012 Link to this post

    I want to add/remove a class from the RadDatePicker when validation occurs, so I can change the border and font to red when it is invalid, and remove those styles when the user fixes the input. I've seen many posts in various forums asking this question or similar questions, but none of the suggestions work with the RadDatePicker.

    What I want is a simple and common scenario:
    - User selects a date
    - Validation fires
    - If invalid, change the color or other CSS properties of the control
    - Change it back to the default when the user fixes the input

    **Edit: I tried to attach a stripped-down version of my project that shows what I have so far, but the extension (ZIP) was not allowed. Please give me an email address to send it to if you'd like to see the sample code.** In the sample project, the problem can be demonstrated by selecting an end date less than the start date, which should trigger the validation. It works correctly in Chrome the first time - border turns red - but only when validation fails after editing the End Date. If validation fails because of changes to the Start Date, the ASP.NET validator picks that up but not the custom code. It's not a complete solution, but it's as far as I got because when I tested in IE I found that the change event doesn't fire at all.

    What I really need, and I think many developers would agree, is a simple property on all the Rad controls such as "ErrorStyle" that sets the class used when a control fails validation. Please register that as a feature request.

    In the meantime, I could use some help getting this to work with the current version of the date picker. One thing that might help is some information on the client-side events which fire during validation, and which HTML elements they fire from. The date picker has quite a complex hierarchy of elements in it, and I've been having trouble discovering how to hook into the right events. It would be nice if the datepicker had some kind of "onvalidated" event I could use. Failing that, is there a way to handle all validate events on the page, determine which control is a datepicker, and act accordingly?

  2. Vasil
    Vasil avatar
    1547 posts

    Posted 30 Aug 2012 Link to this post

    Hi Chris,

    You can change the InvalidStyle and then to use the _invalidate client side method to make the input invalid on validation. Here is an example:
    <script type="text/javascript">
        function ClientValidate(source, arguments)
            var textbox = $find("<%=RadTextBox1.ClientID %>");
            if (textbox.get_value() != "test")
                return false;
            return true;
    <telerik:RadTextBox runat="server" ID="RadTextBox1" InvalidStyle-BorderColor="Orange" Text="test" />
    <asp:CustomValidator runat="server" ID="Validator1" ControlToValidate="RadTextBox1"
        ClientValidationFunction="ClientValidate" Text="Error"></asp:CustomValidator>

    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Edgar
    Edgar avatar
    4 posts
    Member since:
    Oct 2014

    Posted 20 Oct 2014 Link to this post

    I am trying to do something a bit different.  I want to make the border RED when someone empties the RadDatePicker field.  I have tried everything, from adding "onblur" attribute to $('input[id*="rdp_dateInput"]') to trying to set a custom validator with no success.  I added an alert and the border color changes, but after I click on the OK on the alert raddatepicker is changing it back to grey somehow.  How can I make the blank value be a red border???
  5. Edgar
    Edgar avatar
    4 posts
    Member since:
    Oct 2014

    Posted 20 Oct 2014 in reply to Edgar Link to this post

    This hack worked for me, but I would like something more elegant...

    // RadDatePicker hack for red border
    $(document).ready(function () {
    $('input[id*="rdp_dateInput"]').attr('onblur', "if (this.value=='') this.value = String.fromCharCode(0);");
  6. Edgar
    Edgar avatar
    4 posts
    Member since:
    Oct 2014

    Posted 20 Oct 2014 in reply to Edgar Link to this post

    That didn't work quite well in Firefox, here is my new "hack"

    // RadDatePicker hack for red border if blank date entered
    $(document).ready(function () {
        $('input[id*="rdpDOB_dateInput"]').attr('onblur', "if (this.value=='') this.value = ' ';");
        $('input[id*="rdpDOB_dateInput"]').attr('onfocus', "if (this.value==' ') this.value = '';");

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017