重写OnClientClick导致验证多次触发的问题

解决表单重复提交时Validation Summary弹窗多次加载的问题 #

我之前在处理表单重复提交的场景时，也碰到过和你一模一样的问题——重写OnClientClick阻止重复提交后，Validation Summary的错误弹窗总是弹好几次。咱们来一步步解决这个问题：

核心问题分析 #

出现这个情况，大概率是因为你重写OnClientClick时，没有正确协调重复提交拦截逻辑和表单验证的触发逻辑，导致页面验证被多次触发，进而让Validation Summary的弹窗重复加载。另外也可能是按钮的点击事件被多次绑定了。

具体解决方案 #

1. 用提交标记变量阻止重复触发

首先定义一个全局变量标记当前是否正在提交，从根源上阻止重复的提交请求和验证触发：

var isSubmitting = false; // 标记提交状态，初始为未提交

2. 重写OnClientClick，手动控制验证和弹窗显示

不要直接依赖默认的验证触发逻辑，而是在自定义的提交函数里手动调用验证，并且只在验证不通过时手动触发一次Validation Summary弹窗：

<!-- 提交按钮控件 -->
<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClientClick="return handleSubmit();" />
<!-- Validation Summary控件，设置弹窗显示模式 -->
<asp:ValidationSummary ID="valSummary" runat="server" ShowMessageBox="true" ShowSummary="false" />

<script type="text/javascript">
var isSubmitting = false;

function handleSubmit() {
    // 如果正在提交，直接返回false阻止后续操作
    if (isSubmitting) return false;

    // 手动触发客户端验证
    Page_ClientValidate();
    
    if (!Page_IsValid) {
        // 手动调用验证摘要的显示方法，确保只弹出一次
        if (typeof ValidatorShowSummary === 'function') {
            ValidatorShowSummary(document.getElementById('<%= valSummary.ClientID %>'));
        }
        return false;
    }

    // 验证通过后，标记为正在提交，同时禁用按钮防止重复点击
    isSubmitting = true;
    document.getElementById('<%= btnSubmit.ClientID %>').disabled = true;
    
    // 返回true允许服务器端提交
    return true;
}
</script>

3. 排查是否存在重复绑定的情况

检查你的页面代码，看看有没有在其他地方（比如页面加载事件、AJAX回调后）重复给按钮绑定点击事件或者赋值OnClientClick。比如用jQuery的话，要确保只绑定一次：

// 正确做法：先解绑再绑定，避免重复触发
$('#btnSubmit').off('click').on('click', handleSubmit);

4. 调整按钮禁用的时机

注意不要在验证之前就禁用按钮，否则当验证不通过时，用户无法点击按钮重新提交。一定要等验证通过后再禁用按钮，就像上面示例里那样。

总结 #

这个方案的核心就是：用一个状态变量拦截重复提交请求，同时手动控制验证和Validation Summary的显示逻辑，避免系统默认的多次触发。这样既实现了阻止重复提交的功能，又能保证错误弹窗只加载一次。

内容的提问来源于stack exchange，提问作者Antarr Byrd