CustomValidator on DateInput instead of RadDatePicker

6 posts, 0 answers
  1. Laurens
    Laurens avatar
    12 posts
    Member since:
    Sep 2013

    Posted 02 Dec 2013 Link to this post

    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"?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Dec 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Laurens
    Laurens avatar
    12 posts
    Member since:
    Sep 2013

    Posted 03 Dec 2013 Link to this post

    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?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Dec 2013 Link to this post

    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.

  6. Laurens
    Laurens avatar
    12 posts
    Member since:
    Sep 2013

    Posted 04 Dec 2013 Link to this post

    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.
  7. Laurens
    Laurens avatar
    12 posts
    Member since:
    Sep 2013

    Posted 09 Dec 2013 Link to this post

    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)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017