ASP.NET MVC:如果客户端验证通过,则禁用“提交”按钮

时间:2012-12-14 17:50:29

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

我有一个简单的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();
    });
});

2 个答案:

答案 0 :(得分:12)

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

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

答案 1 :(得分:10)

从控制器操作返回部分时出现了一些问题。相反,我挂钩到提交函数并检查表单是否有效:

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