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

FINALLY I figured out a solution that in itself is unobtrusive

    // restore behavior of .cancel from jquery validate to allow submit button 
    // to automatically bypass all jquery validation
    $(document).on('click', 'input[type=image].cancel,input[type=submit].cancel', function (evt)
    {
        // find parent form, cancel validation and submit it
        // cancelSubmit just prevents jQuery validation from kicking in
        $(this).closest('form').validate().cancelSubmit = true;
        $(this).closest('form').submit();
        return false;
    });

Note: If at first try it appears that this isn't working - make sure you're not roundtripping to the server and refreshing the page with errors. You'll have to bypass validation on the server side by some other means - this just allows the form to be submitted without having to mess around adding .ignore attributes to everything in your form.

(you may need to add button to the selector if you're using buttons)