Html.ValidationSummary Question

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();
         }

Re: Html.ValidationSummary Question

You want to call onSubmit() during the submit function of the form (which should only fire when the form is about to be submitted) and not on the click event for the button (which fires every time).

So instead of $("#submit").click use $("form").submit or similar.

Re: Html.ValidationSummary Question

That is not going to work. I want the spinner.gif to be visible when the submit goes through. What I am looking for is a way to make the spinner.gif be not visible when the submit fails and the Validation error are displayed.

Re: Html.ValidationSummary Question

Are you saying that you are submitting the form via ajax? Because otherwise if you are doing a standard post back to the server the validation should trigger immediately and your submit() binding should never happen (so there's no need to "hide" your loading message), unlike your click() binding which will happen whether the form is valid or not.

Re: Html.ValidationSummary Question

You are confusing the issue entirely. I am only concerned with calling my javascript function to disable the spinner.gif if validation fails and the validation errors are displayed. I believe that I described everything in my first post.

Re: Html.ValidationSummary Question

Why would the spinner ever appear if validation failed? Wouldn't you just not show the spinner if until the form is submitted and validation was successful?

Re: Html.ValidationSummary Question

I now understand where you are coming from and I agree with you, however I can't get the following to fire:

$('#myform').submit(function (e) {
            alert("onSubmit");
            onSubmit();
        });

Any ideas what I am doing wrong?

Here is the submit button:

<input name="submit" id="submit" type="submit" value="Save" style="cursor:pointer" />

Re: Html.ValidationSummary Question

Are you sure the selector for the form tag is right? Is the form id "myform"? Also make sure that the form is validating and that no other javascript on the page is preventing the submit event from bubbling up.

Re: Html.ValidationSummary Question

I got it to work but not using the actual id of the Html.BeginForm, I used this and this works:

$(function () {
            $("form").submit(function (e) {
                alert("onSubmit");
                onSubmit();
            });
        });

But this event fires even when the form does not validate. I either need to find a way for this event not to fire if the form does not validate or be able to check inside the event if the form validated. How do I do this?

Re: Html.ValidationSummary Question

Unlike what I was told, the submit event is fired even if the validation fails. The submit does not reach the controller if the validation fails. The only way to not enable the spinner.gif that I am displaying is this:

$(function () {
           $("form").submit(function (e) {
               if ($('.input-validation-error').size() == 0) {
                   onSubmit();
               }
           });
       });

Re: Html.ValidationSummary Question

Appologies, you are right the event will fire every time. However you can check the validation status using the valid() method on the form itself:

$('form').submit(function () {
        if($(this).valid()) {
            alert('the form is valid');
        }
    });