自定义验证程序客户端验证函数未触发

CustomValidator client validation function not firing

本文关键字：验证 客户端 程序 自定义 函数      更新时间：2023-09-26

我认为我想做的事情是相当微不足道的，但事实证明它让我非常麻烦。情况是这样的。

我有两个单选按钮（使用RadButton实现）和一个RadTextBox。我想在提交表单之前检查客户端，当选择两个单选按钮之一（假设第一个）时，RadTextBox 不为空。我使用了 CustomValidator，并且将 ValidateEmptyText="True" 设置为没有运气。代码摘录如下：

<asp:Panel runat="server" ID="Panel1">
<table>
    <tr>
        <td class="auto-style5">
            <telerik:RadButton ID="rdBtnIndividual" runat="server" AutoPostBack="False" GroupName="rdEmplrType" 
                Text="Individual" ToggleType="Radio" OnClientCheckedChanged="rdBtnPhysical_CheckedChanged" 
                UseSubmitBehavior="False">
                <ToggleStates>
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadioChecked" />
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadio" />
                </ToggleStates>
            </telerik:RadButton>
        </td>
        <td>
            <telerik:RadButton ID="rdBtnLegal" runat="server" AutoPostBack="False" GroupName="rdEmplrType" Text="Legal Entity" 
                ToggleType="Radio" OnClientCheckedChanged="rdBtnLegal_CheckedChanged" UseSubmitBehavior="False">
                <ToggleStates>
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadioChecked" />
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadio" />
                </ToggleStates>
            </telerik:RadButton>
        </td>
    </tr>
    <tr>
        <td class="auto-style5">
            <label>Name:</label>
        </td>
        <td>
            <telerik:RadTextBox ID="txtName" Runat="server" EmptyMessage="Name" LabelWidth="64px" Resize="None" Width="160px" DisabledStyle-BackColor="Silver">
            </telerik:RadTextBox>
        </td>
        <td><asp:RequiredFieldValidator ID="THIS_IS_WORKING" ControlToValidate="txtName"
                runat="server" ErrorMessage="<img src='images/Exclamation.png' Title='Required Field'/>" >
            </asp:RequiredFieldValidator>
        </td>
    </tr>
    <tr>
        <td class="auto-style5">
            <label>Father's Name</label>
        </td>
        <td style="width:100px">
            <telerik:RadTextBox ID="txtFathersName" Runat="server" EmptyMessage="Father's Name" LabelWidth="64px" Resize="None" Width="160px" DisabledStyle-BackColor="Silver">
            </telerik:RadTextBox>
        </td>
        <td>
            <asp:CustomValidator runat="server" ID="NOT_WORKING_VALIDATOR" ControlToValidate="txtFathersName" ValidateEmptyText="True"
                ClientValidationFunction="RequiredIfIndividual"
                ErrorMessage="<img src='images/Exclamation.png' Title='Required Field'/>" EnableClientScript="True">
            </asp:CustomValidator>
        </td>
    </tr>
</table>
</asp:Panel>

JavaScript如下：

<script type="text/javascript">
    function RequiredIfIndividual(sender, args) {
        var chkBoxIndividual = $find("<%=rdBtnIndividual.ClientID%>");
        chkBoxIndividual = $telerik.toButton(chkBoxIndividual);
        if (chkBoxIndividual.get_checked()) {
            if (args.Value == "") {
                args.IsValid = false;
            }
            else {
                args.IsValid = true;
            }
        } else {
            args.IsValid = true;
        }
    }
</script>

在花了一些时间解决这个问题之后，我设法找到了问题的根本原因。

此问题与 .NET 4.5 的新不显眼的验证模式有关。要使其正常工作，需要jQuery 2.0。这是 .NET 4.5 中的标准配置。然而，RadControls中的嵌入式jQuery版本（至少到2013Q3版本）是v1.9.1（见这里）。因此，CustomValidator不再正常工作。

有两种选择-我只成功尝试了第一种：

  1. 禁用不显眼的验证模式。为此，您需要在web.config文件的<appSettings>部分中包含以下行：

    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />

    缺点：不显眼的验证模式旨在使HTML5新功能，以消除为执行验证而生成的javascript代码，从而产生更轻的页面（见这里）。通过禁用它，您没有使用此功能。

  2. 选择不使用 jQuery for RadControls 的嵌入式版本（即 v1.9.1），而使用 .NET 4.5 提供的版本（即 v2.0）。

    缺点：这里的问题是RadControls已经使用jQuery的嵌入式版本进行了测试，您可能会遇到问题。要禁用jQuery的嵌入式版本，请参阅此链接

希望这将帮助下一个偶然发现同样问题的人。

您需要

手动调用 ValidatorValidate 函数，并从rdBtnPhysical_CheckedChanged和rdBtnLegal_CheckedChanged处理程序中传递自定义验证程序实例。我在下面为您准备了一个简短的示例：

  <script type="text/javascript">
            function RequiredIfIndividual(sender, args) {
                var chkBoxIndividual = $find("<%=rdBtnIndividual.ClientID%>");
                chkBoxIndividual = $telerik.toButton(chkBoxIndividual);
                if (chkBoxIndividual.get_checked()) {
                    if (args.Value == "") {
                        args.IsValid = false;
                    }
                    else {
                        args.IsValid = true;
                    }
                } else {
                    args.IsValid = true;
                }
            }
            function rdBtnPhysical_CheckedChanged(sender, args) {
                ValidatorValidate($get("NOT_WORKING_VALIDATOR"));
            }
            function rdBtnLegal_CheckedChanged(sender, args) {
                ValidatorValidate($get("NOT_WORKING_VALIDATOR"));
            }
        </script>

我刚刚测试了代码，它似乎工作正常。

我最近自己也遇到了这个问题。但是，我找到了一个不需要采取如此严厉措施的修复程序，例如转动 telerik 的 jquery。简单地将 ControlToValidate 集的 ClientIDMode 设置为静态对我来说就是诀窍。所以它看起来像这样

<asp:TextBox ID="txtInputField" runat="server" ClientIDMode="static" />
<asp:CustomValidator runat="server" ID="valInputField" ControlToValidate="txtInputField" />
相关文章：