Will.Harris Will.Harris - 2 years ago 107
jQuery Question

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

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:

enter image description here

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(

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

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


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?

Answer Source

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(

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(

BundleTable.Bundles.Add(new ScriptBundle(BundleNames.JavaScript.JQueryValidationMin).Include(
                        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...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download