ASP.NET MVC client side validation with jQuery 'loading' image function

Question

I have a jQuery function that shows a 'loading' image and disable the submit button when the form is submitted. I also added Html.EnableClientValidation();

The problem is that when I click the submit button and the form is not valid then I get all the validation error messages but the 'loading' image never stops and the button stays 'disabled'

I want to add functionality that stops the 'loading' image and enables the button when the form is not valid.

I know how to write the jQuery function but I don't know how to integrate it with MVC EnableClientValidation.

Answer 1

I suppose that you are using an AJAX form because you are talking about disabling and enabling the submit button, In this case I would recommend you disabling the submit button just before sending the AJAX request which will ensure that client validation has passed.

If you are using MS AJAX to AJAXify your form the two events you might try are OnBegin and OnComplete :

<% Ajax.BeginForm(new AjaxOptions { 
    OnBegin = "enable" OnComplete = "disable" }) %>

If you are using jquery then you could subscribe for the beforeSend and complete events and this could be achieved globally with $.ajaxSetup .