RequiredFieldValidator无法与jQuery UI一起正常使用 [英] RequiredFieldValidator is not working properly with jQuery UI

查看:93
本文介绍了RequiredFieldValidator无法与jQuery UI一起正常使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在研究ASP.NET Web窗体应用程序.我的表单很大,有很多字段,因此我想从Web Forms中的内置服务器控件中获得尽可能多的优势.另外,由于表单太大,因此我在逻辑上使用jQuery UI 1-8-24和手风琴菜单将其分为三部分.我还在此页面上使用DatePicker,所以我的页面看起来像这样:

I am working on ASP.NET Web Forms application. I have a pretty big form with a lot of fields so I want to take as much advantage as possible from the built-in server controls in Web Forms. Also, because the form is too big I logically have separated it into three parts using jQuery UI 1-8-24 and an accordion menu. I also use a DatePicker on this page so my page looks like this:

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

所以它工作正常,我在此页面上隐含了很多逻辑,直到我声明添加RequiredFieldValidator时,一切都运行良好,例如:

So it's working fine, I've implmeneted a lot of logic on this page and everything was working fine util the moment I stated to add RequiredFieldValidator For example :

<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中的示例,并且验证非常简单,因此我可以使用标准实现.

I think nothing out of the ordinary since I'm using examples from MSDN and the validations are pretty simple so I the standard implementation works for me.

但是,当我添加RequiredFieldValidator时,我失去了jQuery UI的所有样式,并且在控制台中收到此错误:

However when I add the RequiredFieldValidator I lose all the styling from the jQuery UI and I get this error in the console :

Uncaught TypeError: undefined is not a function

我试图注释和取消注释页面上的JS代码.如果我仅使用:

I tried to comment and uncomment the JScode on the page. If I use only:

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

一切正常,但是无论我是否同时使用-日期选择器和手风琴,或者只有其中之一,我都失去了jQuery UI样式,并得到指向我有$("#accordion").accordion();取决于哪个被评论,哪个不被评论.我很确定当我尝试同时使用jQuery UI和RequiredFieldValidator时会有一些问题.在寻找解决方案时,我发现了一部分仅用于datepicker的解决方案,因为我使用了其他jQuery UI方法,并且对以后的accordiondatepicker也找到了部分解决方案,所以它不适用于我在我可能想使用其他东西的地方,那么我也将不得不找到解决方法,所以..是否可以使用内置控件和jQuery UI在Windows Forms中进行客户端验证?

Everything's working fine, but no matter if I use both - the date picker and the accordion, or only one of them I lose the jQuery UI styling and get the error pointing to the row where I have $("#accordion").accordion(); or $(".inpt-date").datepicker(); depending on which one is commented and which not. I'm pretty sure there's some problem when I try to use jQuery UI and RequiredFieldValidator together. While searching for solution I found a partial one which was just for the datepicker which doesn't work for me because I use other jQuery UI methods and also, if I find partial solutions for the accordion and the datepicker later on I may want to use something else then I'll have to find workaround for that too, so.. is there a way to make a client side validation in Windows Forms using the build-in controls together with jQuery UI?

推荐答案

ASP.NET中的RequiredFieldValidator使用jQuery客户端,该客户端需要首先注册(请参阅

The RequiredFieldValidator from ASP.NET uses jQuery clientside which needs to be registered first (see here).

显然,ASP.NET在表单的第一部分中注入了对jQuery的<script>引用.

Apparently, ASP.NET injects a <script> reference to jQuery in the first part of the form.

如果您在页面的<head>中注册了自己的<script>标记(首先是jQuery,然后是jQuery UI),则这实际上意味着您将丢失jQuery UI绑定,因为在<head>之后再次引用了jQuery.感谢WebForms.

If you registered your own <script> tags inside of the <head> of your page (first jQuery then jQuery UI), this effectively means you're losing your jQuery UI bindings because jQuery is referenced again after the <head> thanks to WebForms.

解决方案是在页面的(例如,在form元素之后)引用您的脚本(jQuery,jQuery UI和任何自定义脚本).

The solution is to reference your scripts (jQuery, jQuery UI, and any custom scripts) at the end of the page, for example after the form element.

这篇关于RequiredFieldValidator无法与jQuery UI一起正常使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆