如何防止表单在具有验证器的表单中重复提交？答案

【问题标题】：How to prevent form double submit in form that have Validator?如何防止表单在具有验证器的表单中重复提交？
【发布时间】：2013-09-11 15:55:48
【问题描述】：

我有一个包含TextBox 和Validator 的网络表单：

<script src="../script/jquery-2.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("form").submit(function () {
            $('input[type=submit]', this).attr('disabled', 'disabled');
        });
    });
</script>
<form id="form1" runat="server">
    <asp:RequiredFieldValidator ID="v" runat="server" ControlToValidate="name" ErrorMessage="Required"></asp:RequiredFieldValidator>
    <asp:TextBox ID="name" runat="server"></asp:TextBox>
    <asp:Button ID="submit" runat="server" Text="Go" CausesValidation="true" />
</form>

我想在提交表单时禁用提交button，但是当TextBox 对Validator（为空）无效时，此代码也会禁用提交button。

我想要一种适用于所有 ASP.NET 验证器的方法，而不仅仅是 RequiredFieldValidator。

如何才能仅在实际提交时禁用提交button？

【问题讨论】：

标签： javascript jquery asp.net webforms validation

【解决方案1】：

在禁用提交按钮之前检查全局Page_IsValid变量是否设置为true：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("form").submit(function () {
                if (Page_IsValid)
                    $('input[type=submit]', this).prop('disabled', true);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:RequiredFieldValidator ID="v" runat="server" ControlToValidate="name" ErrorMessage="Required"></asp:RequiredFieldValidator>
        <asp:TextBox ID="name" runat="server"></asp:TextBox>
        <asp:Button ID="submit" runat="server" Text="Go" CausesValidation="true" />
    </form>
</body>
</html>

【讨论】：

@MajidR：它适用于 Firefox 22.0。确保您没有使用缓存页面。另外，它在 IE 或 Chrome 中是否适合您？
@MajidR：我用我用 IE 11、Firefox 22 和 Chrome 29 测试过的 Default.aspx 的全部内容更新了我的答案。尝试创建一个新的 ASP.NET 4.0 Web 窗体项目使用此代码，看看它是否适合您。注意：我将if (!this.IsPostBack) System.Threading.Thread.Sleep(2000); 放在Page_Load 中以模拟延迟；否则，页面回发太快，无法看到按钮被禁用。

【解决方案2】：

$(document).ready(function () {
        $("form").submit(function (e) {
         if($.trim($('#<%=name.ClientID%>').val()) !='' ){ //if textbox not empty
            $('input[type=submit]', this).attr('disabled', 'disabled');
         }else{
            e.preventDefault();
         }
        });
    });

event.preventDefault

你可以使用.prop()

 $('input[type=submit]', this).prop('disabled', true);

【讨论】：

我想为所有Validators 提供一种方法，而不仅仅是RequiredFieldValidator！

【解决方案3】：

protected void submit_Click(object sender, EventArgs e) {
    if (name.Text != String.Empty) {
        submit.Enabled = false;
    } else {
        submit.Enabled = true;
    }
}

此代码没有 java 脚本

【讨论】：