RequiredFieldValidator 不能与 jQuery UI 一起正常工作

Posted

技术标签:

【中文标题】RequiredFieldValidator 不能与 jQuery UI 一起正常工作【英文标题】：RequiredFieldValidator is not working properly with jQuery UI 【发布时间】：2014-10-19 20:08:42 【问题描述】：

我正在开发 ASP.NET Web 窗体应用程序。我有一个包含很多字段的非常大的表单，所以我想尽可能多地利用Web Forms 中的内置服务器控件。此外，由于表单太大，我在逻辑上使用 jQuery UI 1-8-24 和手风琴菜单将其分成三个部分。我还在此页面上使用了 DatePicker，因此我的页面如下所示：

<script>
    $(function () 
        $("#accordion").accordion();
        $(".inpt-date").datepicker();
    );
    window.history.pushState('obj', '', 'myPage.aspx');
</script>

所以它工作正常，我已经在此页面上实现了很多逻辑，并且在我声明添加 RequiredFieldValidator 的那一刻一切正常，例如：

<asp:TextBox ID="txtEnforcementCase" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator2"
    ControlToValidate="txtEnforcementCase"
    Display="Static"
    Text="*"
    ErrorMessage="This field is required!"
    runat="server"/>

我认为没有什么不寻常的，因为我使用的是 MSDN 中的示例，并且验证非常简单，所以我的标准实现适用于我。

但是，当我添加 RequiredFieldValidator 时，我会丢失 jQuery UI 中的所有样式，并在控制台中收到此错误：

Uncaught TypeError: undefined is not a function

我尝试评论和取消评论页面上的JScode。如果我只使用：

window.history.pushState('obj', '', 'myPage.aspx');

一切正常，但无论我同时使用日期选择器和手风琴，还是只使用其中一个，我都失去了 jQuery UI 样式并得到指向我有 $("#accordion").accordion(); 或 @987654330 的行的错误@ 取决于哪个被评论，哪个没有被评论。我很确定当我尝试同时使用 jQuery UI 和 RequiredFieldValidator 时会出现一些问题。在搜索解决方案时，我发现了一个仅适用于 datepicker 的部分解决方案，它对我不起作用，因为我使用其他 jQuery UI 方法，而且，如果我稍后找到 accordion 和 datepicker 的部分解决方案我可能想使用其他东西，然后我也必须找到解决方法，所以.. 有没有办法使用内置控件和 jQuery UI 在Windows Forms 中进行客户端验证？

【问题讨论】：

【参考方案1】：

来自 ASP.NET 的 RequiredFieldValidator 使用 jQuery 客户端，需要先注册（参见 here）。

显然，ASP.NET 在表单的第一部分注入了对 jQuery 的 &lt;script&gt; 引用。

如果您在页面的&lt;head&gt; 内注册了自己的&lt;script&gt; 标签（首先是jQuery，然后是jQuery UI），这实际上意味着您将丢失jQuery UI 绑定，因为在&lt;head&gt; 之后再次引用了jQuery感谢 WebForms。

解决方案是在页面的结束处引用您的脚本（jQuery、jQuery UI 和任何自定义脚本），例如在表单元素之后。

【讨论】：

以上是关于RequiredFieldValidator 不能与 jQuery UI 一起正常工作的主要内容，如果未能解决你的问题，请参考以下文章

如何将RequiredFieldValidator 添加到DropDownList 控件？

ASP:RequiredFieldValidator 和 jQuery 不兼容

RequiredFieldValidator 控件 CompareValidator 控件

[ASP.NET]UserControl透过属性，动态加入RequiredFieldValidator

使用javascript确认时，Asp.net requiredfieldvalidator停止工作

asp.net c#.net jquery / javascript 如何使用复选框启用或禁用 requiredfieldvalidator