jQuery unobtrusive validation ignores “cancel” class on submit button if used in Ajax form

Question

I am trying to implement optional client side validation using

• ASP.NET MVC 4,
• unobtrusive jQuery validation,
• unobtrusive ajax

Answer 1

That's a known limitation of Microsoft's unobtrusive ajax script. You could modify it to fix the bug. So inside the jquery.unobtrusive-ajax.js script replace the following on line 144:

$(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);

with:

$(form).data(data_click, name ? [{ name: name, value: evt.target.value, className: evt.target.className }] : []);

In addition we are passing the class name to the handler so that it can decide whether it should trigger client side validation or not. Currently it always triggers validation no matter which button was clicked. And now on line 154 we modify the following test:

if (!validate(this)) {

with:

if (clickInfo[0].className != 'cancel' && !validate(this)) {

so that client side validation is no longer triggered if a submit button with class name cancel was used to submit the form. Another possibility is to scrape the jquery.unobtrusive-ajax.js script and replace your Ajax.BeginForm with a standard Html.BeginForm that you could unobtrusively AJAXify using plain old jQuery.