CustomValidator on DateInput instead of RadDatePicker

[Laurens]

Hi,

I'm trying to do the following:

<telerik:RadDatePicker ID="DatePicker" runat="server" width="100px">
    <DateInput ID="DatePickerInput" runat="server">
    </DateInput>
</telerik:RadDatePicker>

<script type="text/javascript">
function ValidateDate(sender, args)
{
    var datePicker = $find("<%= DatePicker.ClientID %>");
    args.IsValid = datePicker.get_dateInput._invalid;
}
</script>

<asp:CustomValidator ID="DatePickerInput" runat="server"
    Display="Dynamic" ControlToValidate="DateIsValid"
    EnableClientScript="true" ClientValidationFunction="ValidateDate" ErrorMessage="Invalid Date" />

Whenever I set the RadDatePicker as the ControlToValidate, it seems that the validator only gets fired on the RadDatePicker's client-events, and not the RadDateInput's client-events. E.g. typing "hello" in the input and losing focus won't fire the validator, but selecting a date from the calendar will.
However the example above does not work.
I've thought of some alternative ways, but this one seemed so pretty.

Can is set the RadDatePicker's DateInput as the "control to validate"?

[Shinu]

Hi Laurens,

The integration between RadDateInput and CustomFieldValidator doesn't exist. As a suggestion please try to use the OnError Client side event of DateInput to get the CustomFieldValidator. Please have a look into the sample code snippet.

ASPX:

<telerik:RadDatePicker ID="DatePicker" runat="server" Width="100px">
    <DateInput runat="server" ClientEvents-OnError="Error" ID="DateInput" ClientEvents-OnFocus="Focus">
    </DateInput>
</telerik:RadDatePicker>
<asp:CustomValidator ID="CustomValidator1" runat="server" Display="Dynamic" ErrorMessage="Invalid Date"
    ControlToValidate="DatePicker" />

JavaScript:

<script type="text/javascript">
    var validator = document.getElementById("CustomValidator1");
    function Error(sender, args) {
        validator.isvalid = false;
        validator.runtimeStyle.display = "block";
    }
    function Focus(sender, args) {
        sender.clear();
        validator.runtimeStyle.display = "none";
    }
</script>

Thanks,
Shinu.

[Laurens]

Thank you, Shinu. I didn't know you could get the validator and set it's properties programmatically. 
Still it doesn't work completely yet, since I forgot to mention i'ts in a .ascx user control. As a result, in a page with multiple of these user controls, when the first datePicker get's an invalid input, the last datePicker get's the error message.
Is there a fix for this as well?

[Shinu]

Hi Laurens,

Please have a look into the sample code snippet which works fine at my end.

UserControl page 1:

<telerik:RadDatePicker ID="DatePicker" runat="server" Width="100px">
    <DateInput runat="server" ClientEvents-OnError="Error" ID="DateInput" ClientEvents-OnFocus="Focus">
    </DateInput>
</telerik:RadDatePicker>
<asp:CustomValidator ID="CustomValidator1" runat="server" Display="Dynamic" ErrorMessage="Invalid Date"
    ControlToValidate="DatePicker" />
<br />

UserControl page 1 JavaScript:

<script type="text/javascript">
    function Error(sender, args) {
        var validator = document.getElementById('<%= CustomValidator1.ClientID %>')
        validator.isvalid = false;
        validator.runtimeStyle.display = "block";
    }
    function Focus(sender, args) {
        var validator = document.getElementById('<%= CustomValidator1.ClientID %>')
        sender.clear();
        validator.runtimeStyle.display = "none";
    }
</script>

UserControl page 2:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Width="100px">
    <DateInput runat="server" ClientEvents-OnError="Error1" ID="DateInput1" ClientEvents-OnFocus="Focus1">
    </DateInput>
</telerik:RadDatePicker>
<asp:CustomValidator ID="CustomValidator2" runat="server" Display="Dynamic" ErrorMessage="Invalid Date1"
    ControlToValidate="RadDatePicker1" />

UserControl page 2 JavaScript:

<script type="text/javascript">
    function Error1(sender, args) {
        var validator = document.getElementById('<%= CustomValidator2.ClientID %>')
        validator.isvalid = false;
        validator.runtimeStyle.display = "block";
    }
    function Focus1(sender, args) {
        var validator = document.getElementById('<%= CustomValidator2.ClientID %>')
        sender.clear();
        validator.runtimeStyle.display = "none";
    }
</script>

ASPX:

<uc3:datepicker1 ID="datepicker11" runat="server" />
<uc4:datepicker2 ID="datepicker21" runat="server" />

Thanks,
Shinu.

[Laurens]

Hi Shinu,

Thanks for your reply again. I believe your sample came down to having two .ascx files, like "DatePicker1.ascx" and "DatePicker2.ascx". This would become too costly however, since there are even pages in the application that use six DatePicker.ascx's (or even more when they are dynamically generated).
Is there a way to get the sender's parent, like the div it's in? In that way I could perhaps find the CustomValidator by looping through its childs.

[Laurens]

I fixed it.
Although you could end up with very long method names, it seems like a proper solution

<script type="text/javascript">
    function <%=DatePicker.ClientID%>_OnError
        {
                   ...
        }
        ...
</script>

The following should be done when or after the control is loaded, in order to get the full ClientID.

DatePicker.DateInput.ClientEvents.OnError = String.Format("{0}_OnError", DatePicker.ClientID)