ASP.NET MVC: disable submit button if client validation passes

Question

I have a simple MVC4 form with client validation :

@{ 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 button and all the checks on the client , I want the submit button to be disabled according to jQuery below. How do I know if a client-side check has passed on a jQuery script side?

 <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 connect this code to the form validator. Just make sure it runs AFTER jquery.validator.unobtrusive.

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

Answer 2

I am having trouble returning partail from a controller action. Instead, I connected to the submit function and verified that the form is valid as follows:

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