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

2k views Asked by At

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?

1

There are 1 answers

4
rdmptn On

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.