input maxlength field on ajax form submission causes "Uncaught SyntaxError: unexpected token u"

ajax, maxlength, submit, unobtrusive-validation

Solution

This seems to be a bug in Microsoft.jQuery.Unobtrusive.Validation in combination with jQuery 1.9>

In this blog a patch of the js file is suggested

I reproduced your issue and resolved it by adding a div with the required attributes to your html to prevent an undefined being supplied to the json parse.

    <form action="#" data-ajax="true" id="form0" method="post">
        <div data-valmsg-for="numberValue" data-valmsg-replace="true">deposit not valid</div>
        <input id="deposit" name="numberValue" type="text"  maxlength="8" value="1000">
        <input type="submit" value="go">
    </form>

There is also an Microsoft Connect issue open for this problem. Vote on that one as well to get it prioritized within Microsoft.

Problem

When I submit a form which includes a text field with a "maxlength" attribute using ajax, I get a javascript error: `Uncaught SyntaxError: Unexpected token u (jquery-1.9.1.min.js:3)` If I remove the maxlength attribute everything runs fine. My HTML, stripped down my page to the bare minimum to replicate the issue: ``` <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="/Scripts/jquery.unobtrusive-ajax.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> </head> <body> <form action="#" data-ajax="true" id="form0" method="post"> <input id="deposit" name="numberValue" type="text" class="despositInput" maxlength="8" value="1000"> <input type="submit" value="go"> </form> </body> </html> ``` Can't work out what I'm doing wrong - perhaps the jquery scripts provided by the template from visual studio are incompatible? I'd appreciate any help, thanks.

Original source