Reputation: 9519

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

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 ??

Upvotes: 18

Answers (11)

yany

Reputation: 11

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

Upvotes: 1

nullable

Reputation: 2581

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.

Upvotes: 5

Stian

Reputation: 1299

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

Upvotes: 0

ben

Reputation: 1458

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.

Upvotes: 0

Mike Barlow - BarDev

Reputation: 11277

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/

Upvotes: 1

Jake H.

Reputation: 155

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!

Upvotes: 3

David Scruggs

Reputation: 129

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.

Upvotes: 1

SickHippie

Reputation: 1402

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

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

Upvotes: 19

TheCloudlessSky

Reputation: 18353

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.

Upvotes: 0