CODEWITHSUNDEEP
jqueryasp.net-mvcvalidation
Gavin
Gavin

Reputation: 5871

ASP.NET MVC check form input is valid on submit

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

Upvotes: 7

Views: 13200

Answers (3)

Dax70
Dax70

Reputation: 1051

This only works for MVC 1.0, in MVC 2.0 Microsoft switched to using jQuery and this no longer works.

onformSubmit: function (e) {
    if (!Sys.Mvc.FormContext && Sys.Mvc.FormContext.getValidationForForm(this).validate('submit').length) {
    return;
    showBusy();
}

If you're using the Ajax.BeginForm helper you can do something like

Ajax.BeginForm("action","controller", AjaxOptions{ OnBegin="onformSubmit",...}

Upvotes: 0

Gavin
Gavin

Reputation: 5871

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

Upvotes: 11

queen3
queen3

Reputation: 15521

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

Upvotes: 0

Related Questions