如何在设计时将 RequiredFieldValidator 与 RadDatePicker 的隐藏 dateInput 一起使用？答案

【问题标题】：How to use a RequiredFieldValidator with a RadDatePicker's hidden dateInput at design time?如何在设计时将 RequiredFieldValidator 与 RadDatePicker 的隐藏 dateInput 一起使用？
【发布时间】：2014-11-28 17:27:37
【问题描述】：

我有以下页面。如果您打开此页面，将日期空白，然后单击 Tab 2 而不离开日期字段，您将永远无法返回 Tab 1 来解决您的问题。

<%@ 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>

这个 Telerik 控件呈现为多个输入 - 一个父包装器和一个子文本输入。如果我在子文本输入处添加以下 jquery 重新指向验证器，它工作正常。

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

如何在不使用 jquery 的情况下在设计时将此验证器指向输入？

【问题讨论】：

标签： jquery asp.net validation telerik raddatepicker

【解决方案1】：

删除 SelectedDate 属性，因为它设置了存储日期选择器值的隐藏字段的 value 属性，因此验证器应该检测到选择的日期。检查两种情况下呈现的 HTML 以了解我的意思。

        <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" />

你可以在这里看到这个：http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/validation/defaultcs.aspx

编辑：如果单个控件的验证没有通过，那么当您验证整个页面时，预计不会通过任何验证。考虑将验证分组（通过 ValidationGroup 属性），例如对于每个 PageView，因此您可以仅验证所需的组，例如：

<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" />

对于复杂的输入系统，实际输入的更改会在您对其进行模糊处理时发生，因此如果您需要更详细的验证，您可以附加到输入的特定事件（如模糊触发验证）。如果不进行模糊处理，保存日期的实际输入仍然具有旧日期，因为控件无法知道用户尚未完成编辑。

【讨论】：

这不起作用，因为我首先设置 SelectedDate 的唯一原因是隔离问题。如果去掉SelectedDate，运行例子，设置值，模糊，然后去掉值，点击第二个标签，问题依旧。
用另一个样本更新了答案，并解释了为什么需要模糊
这个解决方案的问题是它允许用户空白信息并点击提交。用提交单击替换选项卡单击，您就会遇到问题。如果我依靠客户端验证器来阻止提交，它们将无法在这种情况下工作并允许将空日期发送到服务器。此外，我添加了 blur() 命令，但它们没有按预期工作，因为验证器没有指向被模糊的控件。此控件仅在所有其他处理发生后更新。
hm.. IE 中的事件顺序可能有些问题，在 onblur 中触发 DateInputs 的验证。我想此时最好的做法是联系 Telerik 支持。