Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
610 views
in Technique[技术] by (71.8m points)

asp.net - RequiredFieldValidator is not working properly with jQuery UI

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>

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"/> 

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.

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

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

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

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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

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.

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...