I have a validation like this:

@{ ViewContext.FormContext.ValidationSummaryId = "valSumId";}
@Html.ValidationSummary(false, "Please fix these errors.", new Dictionary<string, object> { { "id", "valSumId" } })

I have a submit button on my form that fires a javascript function:

    $(function () {
            $("#submit").click(function () {
                onSubmit();
            });
        });

     function onSubmit() {
             $('#loading').toggle();
             $('#loadingspinner').empty();
             $('#loadingspinner').append('<h3 style="text-align: center;">Please Wait...</h3><p />');
             $('#loadingspinner').append('<img alt="Please wait" src="/images/spinner_big.gif" style="display: block;margin-left: auto; margin-right: auto;" />');
         }

If the validation fails, the submit does not go to the controller's action. The validations that failed are displayed.

I now have a spinner.gif being displayed and I want it to go away if validation fails. How do I accomplish this?

I have a function that I can call to make the spinner go away but no event to call the function on.

         function onSubmitCancel() {
             $('#loading').toggle();
             $('#loadingspinner').empty();
         }