Strange behavior in Unobtrusive validation in ASP.NET MVC 4.0

Question

I am using ASP.NET MVC 4.0 and I am experiencing a strange behavior with the JQuery Unobtrusive Validation.

I have placed its related scripts into my layout.cshtml and when I open up the view and hit the submit button, the validation messages are coming and up and suddenly the server call is hit. i.e the debugger steps into the server code for POST event.

So basically, both the things are happening here. The client side validation as well as the server side event.

I can see the messages firing up yet the execution seems to continue and go to server side.

This is my view code :

 @using (Html.BeginForm("AddUser", "Registration", FormMethod.Post, new { enctype = "multipart/form-data", id = "frm1" }))
        {
            //some HTML markup
            .
            .
            .
            <div class="col-md-1 divside-left-first">
                <button type="submit" value="Save" id="Btnsave" class="btn ui-state-default medium">&nbsp;Submit&nbsp;</button>
            </div>
        }

I have placed the following scripts into the layout.cshtml file at the bottom and they are rendered properly on the browser. I checked.

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Apart from that, I haven't used any other scripts with these except the native JQuery.js script.

Things I have already tried :

• Putting scripts on the top section. Didn't work.
• Changing button type from button to input. Didn't work.
• Tried putting scripts into section view instead of layout.cshtml. Didn't work.

Any help or suggestion as to what I am doing wrong here or not getting would be appreciated.

Answer 1

After struggling for almost one day, I finally happened to found out the solution for this in my case. It could be something else for any one, but in my case this seemed to work :

The issue with with the JQuery version that I was using and the unobtrusive validation JS. They seemed to be not going well together and I observed an error stating "Unexpected token u" in the browser console whenever a POST event occured.

So while exploring that error in depth, I came to know that there was some kind of conflict between those two JS files and you need to use one additional JS file that would help eliminate the differences and make them work perfectly together. That file is :

jquery.migrate

You just need to add this JS file reference in your code and make sure that all other JS files are in proper place and then run your code. It was working as expected after this.

Hope this helps.