ASP.NET MVC：如果客户端验证通过，则禁用提交按钮答案

【问题标题】：ASP.NET MVC: Disable Submit button if Client Validation passesASP.NET MVC：如果客户端验证通过，则禁用提交按钮
【发布时间】：2012-12-14 17:50:29
【问题描述】：

我有一个启用了客户端验证的简单 MVC4 表单：

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

当用户单击提交并且客户端上的所有验证通过时，我希望按照下面的 jQuery 禁用提交按钮。我如何知道验证是否在我的 jQuery 脚本中通过了客户端？

<script type="text/javascript">

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

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

您可以将此代码挂接到表单验证器中。只需确保它在 jquery.validator.unobtrusive 之后执行。

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

【讨论】：

这是否比简单地将函数包装在类似以下内容更安全： if ($('#frmMain').valid()) {
我认为这两种方法都可以，当您使用 jQuery Validator 插件时，没有正确的答案。使用 submitHandler（尽管代码更丑），您只处理一次验证，我不确定调用 valid() 是否会重新验证所有字段，这可能会对性能产生一些边际影响。

【解决方案2】：

从控制器操作返回部分时我遇到了一些问题。相反，我连接到提交函数并检查表单是否有效，如下所示：

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

【讨论】：