Login/Register
input maxlength field on ajax form submission causes "Uncaught SyntaxError: unexpected token u"
Asked Answered
Solved ajaxsubmitunobtrusive-validationmaxlength
B

1

8

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.

Bingen answered 10/8, 2013 at 11:34 Comment(3)
I can't seem to recreate your error with the snippet you've provided. Could you make a jsfiddle for us? – Primordium
Worth noting: given the answer below, while maxlength triggers the issue here the real problem is to do with "unobtrusive" validation in general, rather than specific to the maxlength property. – Bingen
@rene, agreed that the cause of the error is the same so the fix is the same. The two questions have different diagnostic information, each might be useful to users searching for how to solve the same problem. Does closing one question as a duplicate retain this search ability? If so I support it. – Bingen
C
10

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.

Confessor answered 19/8, 2013 at 13:0 Comment(1)
Excellent answer. The "div" and js patch solutions work, and illustrate the problem well. Found more info in the bug report: connect.microsoft.com/VisualStudio/feedback/details/776965/… In the end I removed my reference to the "jquery.validate.*" files, as they weren't adding anything in my use case. – Bingen

© 2022 - 2024 — McMap. All rights reserved.