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

CustomValidator on DateInput instead of RadDatePicker

5 Answers 137 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Laurens
Top achievements
Rank 1
Laurens asked on 02 Dec 2013, 03:58 PM
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"?

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 03 Dec 2013, 06:50 AM
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.
0
Laurens
Top achievements
Rank 1
answered on 03 Dec 2013, 02:23 PM
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?
0
Shinu
Top achievements
Rank 2
answered on 04 Dec 2013, 08:58 AM
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.

0
Laurens
Top achievements
Rank 1
answered on 04 Dec 2013, 10:32 AM
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.
0
Laurens
Top achievements
Rank 1
answered on 09 Dec 2013, 10:05 AM
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)
Tags
Calendar
Asked by
Laurens
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Laurens
Top achievements
Rank 1
Share this question
or