How to use a RequiredFieldValidator with a RadDatePicker's hidden dateInput at design time?

Question

I have the following page. If you open this page, blank out the date, and click Tab 2 without leaving the date field, you can never make it back to Tab 1 to fix your problem.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        <script type="text/javascript">

            function ClientTabSelecting(sender, args) {
                //This is mandatory to do some other stuff.
                var isvalid = Page_ClientValidate();
                if (isvalid) {
                    //
                } else {
                    args.set_cancel(true);
                }
            }
        </script>
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" OnClientTabSelecting="ClientTabSelecting" SelectedIndex="0">
            <Tabs>
                <telerik:RadTab ID="TAB1" Text="Tab 1" runat="server" PageViewID="HeaderPage" />
                <telerik:RadTab ID="TAB2" Text="Tab 2" runat="server"  />
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="HeaderPage" runat="server">
                <telerik:RadDatePicker ID="CloseDate1" runat="server" CausesValidation="True" SelectedDate="2014-11-1"></telerik:RadDatePicker>
                <asp:RequiredFieldValidator runat="server" Text="This field is mandatory" ControlToValidate="CloseDate1" ErrorMessage="Close date is required"></asp:RequiredFieldValidator>
            </telerik:RadPageView>
            <telerik:RadPageView ID="TransactionHistoryPage" runat="server">
                    You Should Never See This if the date entered is before 2014
                    <asp:Button runat="server" ID="Button1" CausesValidation="True"/>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        <asp:ValidationSummary runat="server"  ID="summary" />
    </div>
    </form>
</body>
</html>

This telerik control is rendered as multiple inputs - a parent wrapper and a child text input. If I add the following jquery repointing the validator at the child text input, it works fine.

$telerik.$(document).ready(function() { Page_Validators[0].controltovalidate = "CloseDate1_dateInput"; });

How do I point this validator at the input at design time without using jquery?

rdmptn · Answer 1 · 2015-01-29T12:12:33.877

Remove the SelectedDate property as it sets the value attribute of the hidden field that stores the date picker's value, so the validator is expected to detect a date is selected. Inspect the rendered HTML in both cases to see what I mean.

        <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        </telerik:RadDatePicker>
        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="RadDatePicker1"
                                    ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>
        <asp:Button ID="Button1" Text="text" runat="server" />

You can see this in action here: http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/validation/defaultcs.aspx

EDIT: If validation for a single control does not pass, it is expected that no validation will pass when you validate the entire page. Consider breaking validation into groups (via the ValidationGroup property), e.g. for each PageView, so you can validate the needed group only, for example:

<script type="text/javascript">
                function ClientTabSelecting(sender, args) {
                    //This is mandatory to do some other stuff.
                    if (sender.get_selectedTab().get_text() == "Tab 1") {
                        var isvalid = Page_ClientValidate("theGroup");
                        if (isvalid) {
                            //
                        } else {
                            args.set_cancel(true);
                        }
                    }
                }
            </script>
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" OnClientTabSelecting="ClientTabSelecting" SelectedIndex="0">
                <Tabs>
                    <telerik:RadTab ID="TAB1" Text="Tab 1" runat="server" PageViewID="HeaderPage" />
                    <telerik:RadTab ID="TAB2" Text="Tab 2" runat="server" />
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
                <telerik:RadPageView ID="HeaderPage" runat="server">
                    <telerik:RadDatePicker ID="CloseDate1" runat="server" DateInput-ValidationGroup="theGroup"></telerik:RadDatePicker>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Text="This field is mandatory" ValidationGroup="theGroup" ControlToValidate="CloseDate1" ErrorMessage="Close date is required"></asp:RequiredFieldValidator>
                </telerik:RadPageView>
                <telerik:RadPageView ID="TransactionHistoryPage" runat="server">
                    You Should Never See This if the date entered is before 2014
                    <asp:Button runat="server" ID="Button1" CausesValidation="True" />
                </telerik:RadPageView>
            </telerik:RadMultiPage>
            <asp:ValidationSummary runat="server" ID="summary" ValidationGroup="theGroup" />

WIth the complex input system, the changes to the actual input happen when you blur it, so if you need more detailed validation you can attach to specific events of the input like blur to fire validation. If you do not blur it, the actual input that holds the date still has the old date, because the control cannot know the user has not finished editing.

This doesn't work as the only reason I set SelectedDate in the first place was to isolate the problem. If you remove the SelectedDate, run the example, set the value, blur, then remove the value and click the second tab, the problem is still there. — TheMightyGherkin, Jan 28 '15 at 23:08
updated the answer with another sample and with an explanation why blurring is needed — rdmptn, Jan 29 '15 at 12:14
The problem with this solution is that it allows the user to blank out the information and hit submit. Replace the Tab click with a Submit click and you get the issue. If I'm relying on the client side validators to block submit, they won't work in this instance and allow a null date to be sent to the server. Additionally, I have added blur() commands but they do not work as expected because the validator is not pointing at the control being blurred. This control is only updated after all of the other processing has occurred. — TheMightyGherkin, Jan 30 '15 at 22:10
hm..Perhaps something goes amiss with the event order in IE, the validation of the DateInputs fires in onblur. I suppose the best course of action at this point is to contact the Telerik support. — rdmptn, Feb 02 '15 at 15:41

How to use a RequiredFieldValidator with a RadDatePicker's hidden dateInput at design time?

1 Answers1