JQuery 1.6 $('form').validate() not working in IE7 & IE8

Question

UPDATE: I've created a new MVC 3 project with Razor HTML 5, then I've updated the project with NuGet at JQuery 1.6 and the validation plugin doesn't work any more, it does a post back every time and returns the error message from server. I think the validation plugin is broken with JQuery 1.6

I have a MVC 3 app that uses Jquery UI dialog (loaded from a partial view that contains a form) in order to submit information over ajax to the server. I want to trigger the validation of my form on the client side before I do the ajax post. On Firefox and IE9 works fine, in IE7 & IE8 the form.validate() always returns true.

Here is the js code attached to my submit button:

    var wizard = $("#wizard"); //div that holds the modal dialog
    var myform = $("#wizard form");

    var submitFunction = function (e) {
        e.preventDefault(); //no postback
        myform.validate();
        if (myform.valid()) {
            $(this).attr("disabled", "disabled");
            submited = true;
            $.post(
                "SuperAdmin/CreateEditController",
                $(this).serialize(),
                function (data) {
                    if (data.Success) {
                        wizard.dialog('destroy');
                    }
                    else {
                        wizard.html(data.Html);
                    }
                },
                "json"
            ); //end json post
        }
    };
myform.submit(submitFunction);

I am using the following includes:

<script src="@Url.Content("~/Scripts/jquery-1.6.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

The JQuery Validation plugin was upgraded with NuGet at version 1.8.0 and JQuery library to 1.6.

Update: I've tested the code generated with scaffolding default template and it does the same thing, no client side validation. Maybe JQuery 1.6 is not compatible with the Razor scaffolding template ??

If this is the code for the validate function where is `e` defined? Please post the complete code since the problem is expected to be a simple typo that ie does not handle well. — Hogan, May 06 '11 at 10:46
`src="@Url.Content("~/Scripts/jquery-1.6.min.js")"` seems strange to me -- is a new mvc3 thing? — Hogan, May 06 '11 at 10:51
@Hogan JQuery has released an ew and improved version, look here http://www.stefanprodan.eu/2011/05/updat-mvc-projects-to-jquery-1-6/ — Stefan P., May 06 '11 at 10:59

score 19 · Accepted Answer · answered May 10 '11 at 23:49

19

Jquery Validate does not currently work with jQuery 1.6 in IE6, IE7, and IE8.

https://github.com/jzaefferer/jquery-validation/issues/105

answered May 10 '11 at 23:49

SickHippie

1,382
1
8
20

7

I was pulling my hair out on this one. Getting the latest version of jquery.validate fixed the issue. – Sentient May 24 '11 at 15:45

score 5 · Answer 2 · answered Jan 21 '12 at 01:06

I had issues with jquery.validate.js in IE7/IE8. After debugging I noticed the following line was causing the issue (ln 436 in version 1.7):

return $([]).add(this.currentForm.elements)
            .filter(":input")

Replace these two lines with something like:

return $(':input', this.currentForm)

That did the trick for me.

score 3 · Answer 3 · answered May 25 '11 at 19:17

3

Try switching to the non-minified version:

The minified version of jQuery 1.6 seems to not work correctly in IE7, IE8 Compatibility Mode, and IE9 Compatibility Mode. Switching to the non-miinified worked for me.

http://bugs.jquery.com/ticket/9365

Good luck!

answered May 25 '11 at 19:17

Jake H.

155
1
3

The non-minified version solves the problem for me in development. It's not a good solution for production. BTW, I see the problem with IE9 – RickAndMSFT Dec 01 '11 at 18:15

score 1 · Answer 4 · answered May 06 '11 at 09:19

1

Instead of doing this:

if (myform.valid())

do this:

if (myform.validate().form())

Hope this helps. Cheers

answered May 06 '11 at 09:19

Edgar Villegas Alvarado

18,204
2
42
61

score 1 · Answer 5 · answered May 08 '11 at 00:28

1

There are some bugs around attr() in IE7,8, hopefully get fixed in the next release.

Maybe jQuery team did the right thing on changing attr(), but the changes really ruin everyone's work.

And it's definitly a show stoper for upgrade as well.

answered May 08 '11 at 00:28

Shawn

184
2
14

score 1 · Answer 6 · answered May 18 '11 at 14:55

1

It's not working on IE9 for me either. Rolling back to jQuery-1.5.1 fixed the problem for me. You can run the NuGet "Install-Package jQuery -version 1.5.1" package manager command to roll back.

answered May 18 '11 at 14:55

David Scruggs

129
4

Mike Barlow - BarDev · Answer 7 · 2011-08-14T05:00:00.927

I've had a similar situation where every validation is true in IE8 when I used JQuery 1.6.2, Jquery.Validate 1.8, and Jquery.Validate.Unobtrusive; but it works in FireFox

I'm currently creating a website where people can login from any page. My design is that the parent page uses JQuery.Load(url) to load my child page(login) into a JQuery Dialog. My parent page does not contain the JQuery Dialog; the child page (login) contains the dialog. Since the child page is a partial page it did not include all the boiler plate HTML

Example of the html missing in my child page:

<html>
   <title></title>
   <body>
   </body>
</html>

I have come to find out by testing the child page (login) independtly from the parent page, that IE has problems with JQuery Dialog and JQuery Validation when there is not a body element.

I have created a jsFiddle example (see link below). If you test this example in IE 8 the validation does not work, but if you test it in FireFox the validation does work. In the jsFiddle example I included the body element, but IE8 still has problems. When I view the source of jsFiddler, I can not find any body elements and believe this contributes to the issue in jsFiddler. If I run the code on my pc and the body element is included the IE8 and Firefox version both works. If I remove the body element, IE8 does not work and FireFox works.

http://jsfiddle.net/BarDev/aRj64/

score 1 · Answer 8 · edited Oct 01 '18 at 14:50

1

Not the best solution, however, adding the following meta tag to the header section of the page would help disable compatibility mode:

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

edited Oct 01 '18 at 14:50

Sumithran

6,217
4
40
54

answered Mar 02 '12 at 18:02

yany

11
1

score 0 · Answer 9 · answered May 08 '11 at 01:20

0

Make sure your jQuery-Validate plugin is also up to date. You should be using version 1.8.0.1 for jQuery-Validate. The NuGet package name is jQuery.Validation.

answered May 08 '11 at 01:20

TheCloudlessSky

18,608
15
75
116

I have applied the last update from NuGet but the only difference between them is the licence type, the version inside the file is still 1.8.0 – Stefan P. May 09 '11 at 08:22
@Stefan - Can you try removing jQuery and jQuery-Validate, then make sure the actual files are removed from your system and then re-install the two packages? – TheCloudlessSky May 09 '11 at 11:28

score 0 · Answer 10 · answered Dec 19 '11 at 18:45

0

I had the same issue using 1.6.

Upgraded jquery.validate to latest and it made no difference.

Upgradded jquery to 1.7 and it's fixed it.

answered Dec 19 '11 at 18:45

ben

1,448
1
17
12

score 0 · Answer 11 · answered Jan 16 '12 at 07:59

I tried a lot of the answers here without success. In the end, I found that I needed to update the jquery.validate library to version 1.9. I know that I had searched for this earlier but could not find it, so then i wrote this small blog post on how to find the latest version and fix this problem:

Jquery validation not wokring in ie7 and ie 8

JQuery 1.6 $('form').validate() not working in IE7 & IE8

11 Answers11

Linked