ASP.NET - 按钮的客户端 OnClick 事件正在破坏页面验证答案

【问题标题】：ASP.NET - Client-Side OnClick Event of Button is Breaking Page ValidationASP.NET - 按钮的客户端 OnClick 事件正在破坏页面验证
【发布时间】：2009-08-17 20:41:16
【问题描述】：

我在表单上有一个按钮，可以将唯一值保存到我的数据库中，为了防止用户提交两次并收到错误，我添加了一些 JavaScript 逻辑，以便在单击按钮后在客户端禁用该按钮。从功能上讲，这一切都有效，但它产生了一个意想不到的副作用，即字段 Validation 在一个控件上被触发，该控件具有与我提交的完全不同的验证组。如果我删除我的自定义 OnClick 属性，则页面的行为将再次正常。如果您查看this article 中的第 3 项，您会发现其他人也注意到了这个问题。

仔细测试问题后，我注意到确切的问题是在客户端中将按钮更改为disabled = true 的结果。鉴于这种困境，我不得不求助于服务器端解决方案来解决我面临的问题，但我不禁想知道为什么会发生这种情况。这是 ASP.NET 中的错误吗？

如果您想确切了解发生了什么，这里是an example，这里是代码：

<%@ Page Language="C#" %>

<script runat="server" language="C#">
    void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.Button1.Attributes["onclick"] = string.Format("DisableOnSubmit('{0}','{1}');", this.Button1.ClientID, this.Button1.ValidationGroup);
        }
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">
        function DisableOnSubmit(btn, group) {
            if (btn && group) {
                if (Page_ClientValidate(group)) {
                    var btnElement = document.getElementById(btn);
                    if (btnElement) {
                        btnElement.disabled = true;
                        btnElement.value = 'Saving...';
                    }
                }
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="group1">Initial Value</asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="This should come up if the first field is empty."
            ValidationGroup="group1" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
        <asp:Button ID="Button1" runat="server" Text="Click Me!" ValidationGroup="group1" />
        <br />
        <br />
        <asp:TextBox ID="TextBox2" runat="server" ValidationGroup="group2"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="You shouldn't ever see me."
            ValidationGroup="group2" ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
    </div>
    </form>
</body>
</html>

【问题讨论】：

This answer 有很好的解释。

标签： javascript asp.net validation

【解决方案1】：

我总是在 ASP.Net 中发现一些脆弱和错误的东西，但大多数时候它都很棒。也许这只是其中之一......或者我只是没有看到有什么问题。

无论哪种方式，我通常都使用服务器端代码来控制您正在尝试的事情。既然能用就万事大吉了。

【讨论】：

【解决方案2】：

只是在这里猜测，但您的函数 DisableOnSubmit 不返回任何值。 onclick 事件处理程序通常期望 true 或 false。我也遇到了生成页面重新加载的按钮的问题，因为 onclick 事件中的 javascript 无法正常工作。综合考虑这些，单击按钮是否可能仅导致重新加载而不是回发？尝试从 javascript 返回 true 进行测试。

另外，Page_ClientValidate 有副作用吗？

【讨论】：

提交第二个字段为空的表单后，检查 Page_PreRender 中的 IsPostBack 返回 true，Page_IsValid 返回 false。从客户端代码返回 true 对结果没有影响。
好的。我现在明白导致问题的验证在客户端。您可以将其更改为在服务器上执行，然后放弃对 Page_ClientValidate 的调用。或者您可以完全放弃对该按钮的验证，并在您的按钮事件处理程序中手动进行。最后，您可以实现您链接到的页面的选项 4。