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

[Chris]

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?

[Vasil]

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")
        {
            textbox._invalidate();
            textbox.updateCssClass();
            return false;
        }
        return true;

    }
</script>
<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>

Regards,
Vasil
the Telerik team

[Edgar]

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???

[Edgar]

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);");
});

[Edgar]

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 = '';");
});