ASP.NET MVC check form input is valid on submit

Question

Hi all,

I have a form that, when submitted, shows a busy animation and disables the submit button.

Anyone know how to query Microsoft's Sys.Mvc.FormValidation to see if the form passed its test so I can prevent the busy animation showing if the form hasn't actually been submitted? Is there some other work-around?

At present my client side JavaScript looks like this:

$('form').submit(function() {
    $('input[type=submit]', this).attr('disabled', 'disabled');
    ShowBusy();
});

Cheers, Gavin

Answer 1

Use http://jquery.malsup.com/form/. Here's how I do - this method handles the error (and other conditions) to stop animation. It can also either ajaxify form or submit it right away (depending on the submit flag), and do couple of other things.

function GenericAjaxForm(form, success, submit, beforeSubmit) {
   var form = $(form);
   var options = {
      beforeSubmit: function(data, frm, options) {
         form.disable(true);
         form.find("input:submit:last").after(
            "<span class='ajaxwait'><img src='../Content/images/smallwait.gif' /></span>");
         if (beforeSubmit)
            return beforeSubmit(data, frm, options);
      },
      error: function(xhr, status, error) {
         $(".validation-summary-errors").html(getAjaxErrorMessage(status, xhr));
         form.disable(false);
         form.find(".ajaxwait").remove();
      },
      success: function(data) {
         form.disable(false);
         form.find(".ajaxwait").remove();
         $(".validation-summary-errors").html('');
         if (CheckValidationErrorResponse(data, form))
            return;
         success(data);
      }
   };
   if (submit)
      form.ajaxSubmit(options);
   else
      form.ajaxForm(options);
}

Answer 2

I gave up in the end and plugged in the JQuery validation library instead using the Microsoft ASP.NET MVC 2 RC and the MicrosoftMvcJQueryValidation.js library file from the "futures" project to automatically wire up everything for me.

This article explains the process: http://haacked.com/archive/2009/11/19/aspnetmvc2-custom-validation.aspx

So with JQuery validation in effect all I needed to do was make a call to valid()...

$('form').submit(function() {
    if ($('form').valid()) {
        $('input[type=submit]', this).attr('disabled', 'disabled');
        ShowBusy();
    }
});