17

My MVC app is generating the following HTML which causes a Javascript syntax error upon submission (I'm not typing anything into the two text boxes). Here's the generated HTML and the submit handler:

<form action="/UrIntake/Save" id="UrIntakeForm" method="post">

    <input data-val="true" data-val-length="The field LastName must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The LastName field is required." id="FormSubmitter_LastName" name="FormSubmitter.LastName" type="text" value="" />
    <input data-val="true" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The FirstName field is required." id="FormSubmitter_FirstName" name="FormSubmitter.FirstName" type="text" value="" />

    <div id="SubmissionButtons" class="right">
            <input type="button" onclick="SubmitForm()" value="Submit" />
            <input type="button" onclick="CancelForm()" value="Cancel" />
    </div>
</form>

    function SubmitForm() {
        $("#UrIntakeForm").valid();
.
.
.

This is the jQuery code where the syntax error is occurring (v1.9.0). "data" is undefined and the "return" line is where the error occurs:

parseJSON: function( data ) {
    // Attempt to parse using the native JSON parser first
    if ( window.JSON && window.JSON.parse ) {
        return window.JSON.parse( data );
    }

Presumably, I don't have to enter anything into the text boxes (and should then get the "field is required" message). Is this what's causing the error? That doesn't make sense, but I don't see what else it could be.

Liam
  • 27,717
  • 28
  • 128
  • 190
birdus
  • 7,062
  • 17
  • 59
  • 89
  • I don't think the error is discernible from what you're showing here. Try putting a breakpoint in the jQuery code where the error occurs and look back through the stack trace to see where it's being called from. That will give you clues as to why null is being passed to this function. – Jerry Feb 11 '13 at 23:07
  • Will do. When I discover something helpful, I'll come back. Thanks. – birdus Feb 11 '13 at 23:08
  • Please vote here so that Microsoft corrects it ASAP: http://connect.microsoft.com/VisualStudio/feedback/details/776965/please-support-jquery-v1-9-0-properly-in-jquery-validate-unobtrusive – Leniel Maccaferri Feb 16 '13 at 16:35
  • Added jquery 1.10 tag as it is also an issue in this – Liam Jul 26 '13 at 13:29

2 Answers2

23

Cause

This is an issue with jquery.validate.unobtrusive.js in your ASP.NET.MVC package.

As of jQuery 1.9, the behavior of parseJSON() has changed and an undefined value would be considered a malformed JSON, resulting in the error you've specified. See the jQuery 1.9 Core Upgrade Guide for more information.

Solution

Use the jQuery Migrate plugin, which among other things adds backward-compatibility to the jQuery parseJSON() utility.


EDIT

According to the official announcement in this thread on Microsoft Connect, the issue has been resolved in the latest release of the framework.

Naturally, as Andreas Larsen noted in the comments, make sure to clear any relevant cache, server-side and client-side, after upgrading to the new release.

Boaz
  • 19,892
  • 8
  • 62
  • 70
  • 1
    @birdus No problem. The release of jQuery 1.9 caused a lot of such issues in many frameworks. – Boaz Feb 12 '13 at 18:16
  • Please vote here so that Microsoft corrects it ASAP: http://connect.microsoft.com/VisualStudio/feedback/details/776965/please-support-jquery-v1-9-0-properly-in-jquery-validate-unobtrusive – Leniel Maccaferri Feb 16 '13 at 16:29
  • MS released the new unobtrusive and unobtrusive ajax packages. the live() function has been replaced with on() and also the json parse problem is solved. – firepol Mar 12 '13 at 10:37
  • @firepol True. It's already been noted in the answer. For a complete list of important changes introduced in jQuery 1.9 see the [jQuery Core 1.9 Upgrade Guide](http://jquery.com/upgrade-guide/1.9/) – Boaz Mar 12 '13 at 10:41
  • 4
    @firepol can you post links to the new packages you tried that seem to be working for you? The ones I just got from nuget (2.0.30116.0) don't appear to solve anything. See my comment here: http://connect.microsoft.com/VisualStudio/feedback/details/776965/please-support-jquery-v1-9-0-properly-in-jquery-validate-unobtrusive – Jorin Mar 25 '13 at 16:44
  • 3
    I second this. Running latest as of today (2.0.30116.0 published 18th of Feb on nuget) does not fix this validation error. – angularsen Mar 29 '13 at 19:07
  • @AndreasLarsen On the forum thread you now say it was a cache issue? – Boaz Mar 29 '13 at 19:30
  • 3
    Yes, I just discovered it. Refreshing browser cache seemed to fix the problem. I noticed that the dynamic code, which you see when breaking on the error in Visual Studio, did not match the new file I just installed via nuget. That led me to find out that it was a stale client cache. Before that, I also deleted all bin and obj folders in the hopes to clear any server side cache of the javascript bundling. It is possible that a combination of clearing both server and client side was necessary. – angularsen Mar 29 '13 at 19:38
  • @AndreasLarsen Thanks I'll add a note about in the answer. – Boaz Mar 29 '13 at 19:39
6

I also had this issue. The problem was that $.parseJSON(undefined) causes an exception to be thrown, and that the unobtrusive validation was making that call. As stated in the accepted answer, this has since been fixed.

You can download the Microsoft version of this script which will properly validate without causing an exception from this link: http://ajax.aspnetcdn.com/ajax/mvc/5.1/jquery.validate.unobtrusive.min.js

Travis J
  • 81,153
  • 41
  • 202
  • 273