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

    });

});

Answer 1

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>

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

Sign up