jQuery Validator Plugin and IE8

On October 30, 2009, in Javascript, Browsers, by Anuj Gakhar

I had been using the super jQuery Validator plugin in one of my projects. And everything was working fine, except in IE8. Isnt that typical of IE? Anyways, the problem was that I was using the validator plugin quite heavily and one of the forms simply refused to work in IE8. I did not try in IE6 but I would assume the problem would be the same in IE6 as well. I tried all kinds of things, like validating my Javascript code and going over it line by line and making sure there are no bugs that I missed.

None of that worked. After about a million WTF’s and approx. 6.5 hours of time wasted, I found this out. http://www.seodenver.com/jquery-validator-annoyances/

The solution is to use jquery.validator.min.js instead of jquery.validator.pack.js (which I was using).  As soon as I changed the .pack.js file to .min.js file, everything started working. I would think its something to do with the the encoding of the JS etc. But I am glad I found the solution, finally.

I just wanted to blog about it so someone else can save some time with this little tip.

Tagged with:  

20 Responses to jQuery Validator Plugin and IE8

  1. mark says:

    i can vouch for this, ie8 sucks!

  2. Anuj Gakhar says:

    sure it does Mark, someone could have saved days worth of time spent if it didnt 🙂

  3. Nick says:

    I spent a few hours yesterday troubleshooting for IE6 on the same issue, yes 6, and after switching pack with min, everything worked.

  4. Anuj Gakhar says:

    I know Nick. we should all send an invoice to IE team 🙂

  5. Gary Fenton says:

    You should try Validity instead. It has much better features and works on IE8 and all other popular browsers. It’s really flexible and lets you change how the validation errors are displayed with 1 line of code, or roll your own.

    http://validity.thatscaptaintoyou.com/

    Totally recommended. 🙂

  6. I always staying away from pack’ed code–because it alters the source code and can make it difficult to track problems.

    Also, the min’ed version (when using gzip on the server) is usally going to be smaller anyway.

  7. Anuj Gakhar says:

    @Gary, Validity looks promising. I never heard about it before. Thanks for letting me know. However, given the amount of code I have written already, I am not gonna just switch to Validity. But in any future projects, I will definitely try.

    @Dan, I agree now that I know the downsides of using packed code.

  8. William Ukoh says:

    I believe the mechanism used to pack JS files is inefficient and would cause errors in some browsers. I stopped “packing”my custom JS files, instead, I only minify them. jQuery doesnt even offer packed versions of its library, only source and minified versions

  9. Amol says:

    I have a problem of jQuery validate plugin in IE 8. When error messages are displayed, the Html table data moves. I need to stop the data from moving.

  10. Andy Thomas says:

    Brilliant concept about jQuery Validator Plugin and IE8. I am glad I found the solution, finally. Thanks!

  11. Camilo says:

    jQuery Validator Plugin version 1.8 doesn’t work on IE8, so I used the 1.7 version and worked fine.

  12. Dan says:

    Thanks for the tip – you probably saved me 6.5 hours!

  13. albian says:

    Hi, this is an awesome jquery application— but I can’t make it work for radio buttons unless they have an id. How can I make radio button validation work?

  14. sandip says:

    IN my code all validator work fine But only the remote validator not work in IE.
    replay me ….Please
    Thanks in advanced

  15. mausmee says:

    Can u tell me that difference between jquery.validator.min.js and jquery.validator.js through which ie-8 problem is removed.

    • Anuj Gakhar says:

      both .js and .min.js should work… it was the .pack.js that was not working

      • Bob says:

        I’m observing the fnlwoliog error with jsprogressbarhandler:Creating it like so:myJsProgressBarHandler = new JS_BRAMUS.jsProgressBar($( progBar’), 0, {animate:false, boxImage: /progressbar/percentImage.png’, barImage: /progressbar/percentImage_back1.png’});And then calling:myJsProgressBarHandler.setPercentage(percent);I get the error:$(this.id + _percentImage ) is null(line 404)Interestingly, this happens only the *first* time the page is loaded. If I hit refresh, it works the second time. If I clear my browser cache and refresh, or control-refresh, it gives me that error until I refresh a second time.It seems to work in IE8; I’m only getting the error in Firefox. The error exhibits itself even if I make the two calls above one immediately after the other.

  16. […] problem and they even had problems with IE7. In my case it was just IE8. So I searched the net and found this site. Which basically said if I used the mini version of validation, it would work. And guess what? IT […]

  17. DelBoy says:

    thank god for that! i owe you a beer lol

  18. Scott says:

    Thanks man. Saved me a wasted day.

Leave a Reply to Camilo Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: