javascript CustomValidator 客户端验证功能未触发

CustomValidator client validation function not firing

提问by Lefteris

I thought that what I was trying to do was rather trivial, but it turns out to trouble me significantly. Here is the situation.

我以为我试图做的事情是微不足道的，但结果却给我带来了很大的麻烦。这是情况。

I have two radio buttons (implemented using RadButton) and a RadTextBox. I want to check on the client, before submitting the form that the the RadTextBox is not empty when the one of the two radio buttons is selected (let's say the first one). I have used the CustomValidator and I have set ValidateEmptyText="True" to no luck. The extract of the code is below:

我有两个单选按钮（使用 RadButton 实现）和一个 RadTextBox。我想检查客户端，然后在选中两个单选按钮之一时，提交Rad电解箱的表单不为空（让我们说第一个）。我已经使用了 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>

The javascript is below:

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>

回答by Lefteris

After spending some time to nail this problem down, I managed to find the root cause of the problem.

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

The issue is related to the new unobtrusive validation mode of .NET 4.5. For this to work properly jQuery 2.0 is required. This is standard in .NET 4.5. However the embedded jQuery version in RadControls (up to at least version 2013Q3), is v1.9.1 (see here). As a result the CustomValidatordoes not work properly anymore.

该问题与 .NET 4.5 新的非侵入式验证模式有关。为此，需要 jQuery 2.0 才能正常工作。这是 .NET 4.5 中的标准。但是，RadControls 中嵌入的 jQuery 版本（至少到 2013Q3 版本）是 v1.9.1（请参阅此处）。结果CustomValidator无法正常工作了。

There are two alternatives to this - I have only tried the first one with success:

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

1. Disable unobtrusive validation mode. To do this you need to include the following line in the <appSettings>section of the web.configfile:

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

   The downside: Unobtrusive validation mode is designed to make se of new HTML5 features in order to eliminate the javascript code generated in order to perform the validations, resulting in lighter pages (see here). By disabling it, you are not making use of this feature.

2. Choose not to use the embedded version of jQuery for RadControls (i.e. v1.9.1) and use the one provided by .NET 4.5 (i.e. v2.0).

   The Downside: The problem here is that RadControls have been tested using the embedded version of jQuery and you may run into problems. In order to disable the embedded version of jQuery please refer to this link

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

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

   缺点：非侵入式验证模式旨在利用新的 HTML5 功能，以消除为执行验证而生成的 javascript 代码，从而使页面更简洁（请参阅此处）。通过禁用它，您并没有使用此功能。

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

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

Hope this will help the next person who will stumble upon this same problem.

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

回答by Genady Sergeev

You need to manually call the ValidatorValidate function and pass the custom validator instance from within the rdBtnPhysical_CheckedChanged and the rdBtnLegal_CheckedChanged handlers. I've prepared a short example for you below:

您需要手动调用 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>

I've just tested the code and it seems to work fine.

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