JQuery and JQuery.Validate "Unable to get property 'call' of undefined or null reference" error

Question

I have an ASP.NET MVC 5 application that is using JQuery v1.10.2 and JQuery.Validate v1.13.1 and I am getting the following error in Chrome when validating a form by clicking "Submit" or when an input is validated after losing focus:

and Internet Explorer also gives me the same error.

I am using the bundle system to bundle different scripts together and this is maintained in another project (which is shared between applications making the code maintainable in one place). My bundles look like this:

BundleTable.Bundles.Add(new ScriptBundle(BundleNames.JavaScript.JQuery).Include(
                    string.Format("~/{0}/jquery-1.10.2.js",_JavaScriptFolder""),
                    string.Format("~/{0}/jquery-1.10.2.min.js",_JavaScriptFolder),
                    string.Format("~/{0}/jquery-migrate-1.2.1.js",_JavaScriptFolder),
                    string.Format("~/{0}/jquery-migrate-1.2.1.min.js",_JavaScriptFolder)));

BundleTable.Bundles.Add(new ScriptBundle(BundleNames.JavaScript.JQueryValidation).Include(
                string.Format("~/{0}/jquery.validate.js",_JavaScriptFolder),
                string.Format("~/{0}/jquery.validate.min.js",_JavaScriptFolder),
                string.Format("~/{0}/jquery.validate.unobtrusive.js",_JavaScriptFolder),
                string.Format("~/{0}/jquery.validate.unobtrusive.min.js",_JavaScriptFolder),
                string.Format("~/{0}/jquery.validate-vsdoc.js", _JavaScriptFolder)));

And they get included to the applications layout view like so:

    @Scripts.Render(Ebi.Mvc.Library.Bundling.BundleNames.JavaScript.JQuery)    
    @Scripts.Render(Ebi.Mvc.Library.Bundling.BundleNames.JavaScript.JQueryValidation)

This setup was working fine when JQuery v1.9.1 and JQuery.Validate v1.10.0 were being used but I had to update JQuery.Validate and I also decided to update JQuery (I am avoiding 2.X because of IE compatibility reasons), but since then I have been stuck with this error. I have even tried changing back to the original versions that were working OK but oddly the error is still occurring.

I have looked at the answer to this question (which seems practically identical) and I installed the JQuery Migrate plugin using NuGet package manager, and I added it to the JQuery bundle, but all that seemed to do was stop an error being thrown as soon as a page containing a form loaded.

I will also add that after the error is thrown the validation still takes place on the form (e.g. adding the validation classes to the inputs and displaying input errors).

Can anybody help me figure out what is causing this error?

Solution 1

In my scenario, it turns out that what Sparky said about using minified and un-minifed versions of the same script was actually causing the issue.

To resolve this I split my bundles up into minifed and un-minified versions which makes both types usable in my application if required.

BundleTable.Bundles.Add(new ScriptBundle(BundleNames.JavaScript.JQuery).Include(
                        string.Format("~/{0}/jquery-1.9.1.js",_JavaScriptFolder)));

BundleTable.Bundles.Add(new ScriptBundle(BundleNames.JavaScript.JQueryMin).Include(
                        string.Format("~/{0}/jquery-1.9.1.min.js", _JavaScriptFolder)));

BundleTable.Bundles.Add(new ScriptBundle(BundleNames.JavaScript.JQueryValidation).Include(
                        string.Format("~/{0}/jquery.validate.js",_JavaScriptFolder),
                        string.Format("~/{0}/jquery.validate.unobtrusive.js",_JavaScriptFolder)));

BundleTable.Bundles.Add(new ScriptBundle(BundleNames.JavaScript.JQueryValidationMin).Include(
                        string.Format("~/{0}/jquery.validate.min.js",_JavaScriptFolder),
                        string.Format("~/{0}/jquery.validate.unobtrusive.min.js", _JavaScriptFolder)));

Since doing this I was able to update the JQuery.Validate plugin without the error occurring. I didn't even have to use the JQuery Migrate plugin in the end either.

So I guess if anybody else gets this error it is worth checking that you aren't referencing both minified and un-minified versions of the JQuery and JQuery Validate scripts.

The confusing bit on my half that I still don't have an answer to is that the bundles (as coded in my question description) were setup that way for over a year with no errors ever occurring and multiple applications having made use of it, until I tried updating a plugin...

Solution 2

Precision ought to be added to these soluion because they are not working on MVC4. I faced this situation and have tried these answers without sucess. When i have added these jquery-migrate files with Nuget and have directly added the reference of these files in the html page or to jquery bundle in BundleConfig without any success. After many hours of trying, I have finally understand that it is better to use the bundles in the head of a given page or a given layout than to used reference of known files in html document . I have just change the link of styles and javascript files to something like the code below and they have generated the needed link of the page.

   @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/jqueryui")
   <script type="text/javascript" src="~/Scripts/jquery.validate-vsdoc.js"></script>
   @Scripts.Render("~/bundles/jqueryval") 

By doing like this, i have success and not longer have this error.

If not added on the above jqueryval, you can not perform validation