Ajax ModalPopupExtender页面验证不通过仍弹出问题求助

我仔细看了你的代码和问题，发现问题出在两个关键地方：客户端验证后没有阻止按钮的默认回发行为，以及按钮未关联对应的验证组，导致验证逻辑没有正确生效。下面是具体的修复方案：

1. 修改客户端showProgress函数，返回验证结果 #

你当前的函数仅执行了验证，但没有告诉按钮「验证失败就不要提交」。修改后的函数会在验证通过时显示弹窗并允许回发，验证失败时阻止回发且不显示弹窗：

function showProgress() {
    // 针对指定验证组执行客户端验证
    var isValid = Page_ClientValidate("Validate");
    if (isValid) {
        // 仅验证通过时显示弹窗
        $find('mdlPopup').show();
    }
    // 返回验证结果，控制按钮是否触发回发
    return isValid;
}

2. 给按钮添加验证组关联并修正OnClientClick #

你的RequiredFieldValidator设置了ValidationGroup="Validate"，但按钮没有关联这个组，导致前后端验证逻辑不匹配。同时OnClientClick需要添加return，让函数的返回值能控制按钮行为：

<asp:Button runat="server" ID="Button2" Text="Send" CssClass="input-button" 
    OnClick="btn_Click" Width="167px" 
    OnClientClick="return showProgress();"  <!-- 必须添加return -->
    ValidationGroup="Validate" /> <!-- 关联验证组 -->

3. 完整修复后的前端代码 #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="SendBulkEmail.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function showProgress() {
    var isValid = Page_ClientValidate("Validate");
    if (isValid) {
        $find('mdlPopup').show();
    }
    return isValid;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="srcMan" runat="server"></asp:ScriptManager>
<div>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<asp:Button runat="server" ID="Button2" Text="Send" CssClass="input-button" 
    OnClick="btn_Click" Width="167px" 
    OnClientClick="return showProgress();" 
    ValidationGroup="Validate" />
<ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="pnlPopup" PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress">
<div id="imageDiv">
<div style="float: left; margin: 9px">
<img src="loader.gif" width="32px" height="32px" /></div>
<div style="padding-top: 17.5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">
Sending file. Please wait...
</div>
</div>
</asp:Panel>
</div>
<asp:RequiredFieldValidator Display="Dynamic" ValidationGroup="Validate" ID="Validator1" runat="server" ErrorMessage="First Name is required" ControlToValidate="txtFirstName"></asp:RequiredFieldValidator>
</form>
</body>
</html>

修复原理说明 #

• 点击按钮时先执行showProgress()，触发客户端验证
• 若验证失败（比如输入框为空），函数返回false，按钮不会触发回发，弹窗也不会显示
• 若验证通过，函数返回true，按钮触发回发同时显示加载弹窗
• 按钮与验证器关联同一验证组，确保即使客户端验证被绕过，服务器端也能再次执行验证逻辑

这样就能实现仅当页面验证通过时才显示模态弹窗的需求了。

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