ASP.NET MVC: Disable Submit button if Client Validation passes

Question

I have a simple MVC4 form with Client Validation enabled:

 @{ Html.EnableClientValidation(); }
 @{ Html.EnableUnobtrusiveJavaScript(); }
 @using (Html.BeginForm("Search", "Search", FormMethod.Post, new { id = "frmMain" }))
    {
      @Html.AntiForgeryToken() .....
      <input type="submit" value="Search" id="btnSubmit" />

When the user clicks the submit and all validation passes on the client, I wish to have the submit button disabled as per jQuery below. How do I know if the validation has passed client side in side my jQuery script?

<script type="text/javascript">

$(document).ready(function () {
    $('input[type=submit]').click(function (e) {
        $(this).attr('disabled', true);
        $(this).attr('value', 'Working');
        $('#frmMain').submit();
    });
});

Felipe Leusin · Accepted Answer · 2012-12-14 18:09:10Z

14

You can hook this code into the form validator. Just make sure it executes AFTER the jquery.validator.unobtrusive.

<script>
    $("#you-form-id").data("validator").settings.submitHandler = function(form) {
         $("#submit-button").attr("disabled",true).val("Working");
         form.submit();
    };
</script>

answered Dec 14, 2012 at 18:09

Felipe Leusin

20k2 gold badges28 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ian Vink Over a year ago

Is this safer than simple wrapping the function in something like: if ($('#frmMain').valid()) {

Felipe Leusin Over a year ago

I supposed both ways work, and there's no right answer when you're using jQuery Validator plugin. With the submitHandler (despite the code being uglier) you're only processing the validation once and I'm not entirelly sure if calling valid() would re-validate all the fields, something that can have some marginal performance impact.

David · Accepted Answer · 2013-05-09 11:20:18Z

13

I had some issues when return a partail from the controller action. Instead I hooked in to the submit function and checked that the form was valid like this:

        $('form').submit(function () {
            if ($(this).valid()) {
                $('#order-form-submit-button').attr("disabled", true).val("wait...");
            }
        });

answered May 9, 2013 at 11:20

David

5816 silver badges16 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC: Disable Submit button if Client Validation passes

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related