JQuery and JQuery.Validate "Cannot get 'call' call from undefined or null reference"
I have an ASP.NET MVC 5 application that uses 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 the login is confirmed after losing focus:
and Internet Explorer is giving me the same error as well.
I use a package system to combine different scripts and this is supported in another project (which is shared between applications that maintain the code in the same place). My packages 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 are included in the view of the application as follows:
@Scripts.Render(Ebi.Mvc.Library.Bundling.BundleNames.JavaScript.JQuery)
@Scripts.Render(Ebi.Mvc.Library.Bundling.BundleNames.JavaScript.JQueryValidation)
This setup worked fine when JQuery v1.9.1 and JQuery.Validate v1.10.0 were used, but I had to update JQuery.Validate and I also decided to update JQuery (I avoid 2.X due to IE compatibility reasons), but since then since then i'm stuck with this error. I even tried going back to the original versions, which worked fine, but oddly enough, the error still happens.
I looked at the answer to this question (which seems almost identical) and I installed the JQuery Migrate plugin using the NuGet package manager and I added it to JQuery, but all that seemed to do was stop the error occurring as soon as the page containing the loaded form.
I'll also add that after rejecting the error, the validation still happens in the form (for example, adding validation classes to inputs and displaying input errors).
Can someone help me figure out what is causing this error?
source to share
In my scenario, it turns out that Sparky said using mini and unminified versions of the same script actually caused the problem.
To solve this problem, I split my packages into minified and non-minified versions, making both types usable in my application if needed.
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 then, I have been able to update the jQuery.Validate plugin without getting an error. I didn't even have to use the JQuery Migrate plugin at the end.
As such, I think if anyone else gets this error it is worth checking that you are not referencing the minified and unminified versions of JQuery scripts and JQuery Validate.
The confusing bit in my half that I still don't have an answer to is that the packages (as stated in my question description) have been configured this way for over a year, with no errors ever encountered, and multiple applications , from it until I tried updating the plugin ...
source to share
Precision has to be added to this solution because they don't work with MVC4. I ran into this situation and tried these answers with no success. When I added these jquery-migrate files from Nuget and directly added a link to those files in the html page or jquery bundle in the BundleConfig without any success. After many hours of trying, I finally figured out that it is better to use bundles in the head of a given page or given layout than using a link of known files in an html document. I just changed the link of styles and javascript files to the code as below and they created the required link to 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")
This way I have success and I no longer have this error.
If you haven't added the above jqueryval then you won't be able to do validation
source to share