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


CustomValidator client validation function not firing

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

我有两个单选按钮(使用 RadButton 实现)和一个 RadTextBox。我想检查客户端，然后在选中两个单选按钮之一时，提交Rad电解箱的表单不为空(让我们说第一个)。我已经使用了 CustomValidator 并将 ValidateEmptyText="True" 设置为没有运气。代码摘录如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<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如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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;
        }
    }

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

该问题与 .NET 4.5 新的非侵入式验证模式有关。为此，需要 jQuery 2.0 才能正常工作。这是 .NET 4.5 中的标准。然而，RadControls 中嵌入的 jQuery 版本(至少到 2013Q3 版本)是 v1.9.1(见这里)。结果 CustomValidator 不再正常工作。

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

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

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

  • 选择不为 RadControls 使用 jQuery 的嵌入式版本(即 v1.9.1)，而使用 .NET 4.5 提供的版本(即 v2.0)。

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

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

    相关讨论

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
      <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"));
                }

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

    相关讨论