点击AjaxFileUpload上传按钮时如何验证TextBox输入

我完全没接触过Web开发，纯新手。想实现一个常见需求：Web表单里有个填用户信息的TextBox和AjaxFileUpload控件，希望点击上传按钮时先检查TextBox是否已填写。

已经搞定了上传后的操作（用OnClientUploadCompleteAll事件、JS函数加隐藏按钮），但尝试用OnClientUploadStart事件做验证时，各种方法都没用（代码里注释的那些），猜测是触发这个事件时上传流程已经启动，按钮变成了取消按钮，没法阻止上传。另外试过ASP.NET验证控件，操作不当导致验证只在上传后触发，还搞坏了原本正常的上传后代码。

相关代码：

<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" 
    OnUploadComplete="AjaxFileUpload1_UploadComplete"
    OnClientUploadCompleteAll="JSUpldDoneAll"
    OnClientUploadStart="JSUpldStart"
    Width="50%" />

function JSUpldStart(sender, args) {
    /*alert("JSUPldStart")*/
    if (TxtUplBy.value == "") {
        alert("It's blank.")
        /*args.cancel(true);    Cancel is not a function*/
        //throw ("Please fill in name.");
        //return false;
        //args.set_cancel(True);        Error: True is not defined
        //args.set_cancel(true);        Error: set_cancel is not a function
        //args.set_cancel=true          Did absolutely nothing.
    }
}

方法一：拦截上传按钮的点击事件（最直接有效） #

OnClientUploadStart触发时上传流程已经启动，确实没法通过它取消上传。不如直接在用户点击「上传」按钮时先做验证，阻止默认的上传行为。

步骤：

1. 给AjaxFileUpload控件加个CssClass，方便定位上传按钮
2. 用JS监听上传按钮的点击事件，先验证TextBox内容，没填就阻止上传

修改后的完整代码：

<%-- 假设你的TextBox是服务器控件 --%>
<asp:TextBox ID="TxtUplBy" runat="server"></asp:TextBox>

<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" 
    OnUploadComplete="AjaxFileUpload1_UploadComplete"
    OnClientUploadCompleteAll="JSUpldDoneAll"
    Width="50%" 
    CssClass="ajax-upload-container" />

<script>
// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    // 找到上传控件里的上传按钮（控件生成的按钮自带class：ajax__fileupload_uploadbutton）
    const uploadButton = document.querySelector('.ajax-upload-container .ajax__fileupload_uploadbutton');
    if (uploadButton) {
        uploadButton.addEventListener('click', function(event) {
            // 获取TextBox的客户端元素（必须用ClientID，因为ASP.NET会自动修改服务器控件的ID）
            const txtInput = document.getElementById('<%= TxtUplBy.ClientID %>');
            // 去掉首尾空格再判断是否为空
            if (txtInput.value.trim() === '') {
                alert('请先填写用户信息！');
                // 阻止按钮的默认上传行为
                event.preventDefault();
                event.stopPropagation();
                return false;
            }
        });
    }
});

// 保留你原本的上传完成回调函数
function JSUpldDoneAll(sender, args) {
    // 你的上传后处理逻辑
}
</script>

方法二：正确使用ASP.NET验证控件 #

如果想用ASP.NET自带的验证控件，要注意设置ValidationGroup和CausesValidation，保证点击上传按钮时触发验证：

<asp:TextBox ID="TxtUplBy" runat="server" ValidationGroup="UploadValidation"></asp:TextBox>
<%-- 绑定到TextBox的必填验证器 --%>
<asp:RequiredFieldValidator ID="ReqValidator_UplBy" runat="server"
    ControlToValidate="TxtUplBy"
    ErrorMessage="请填写用户信息"
    ValidationGroup="UploadValidation"
    Display="Dynamic"
    ForeColor="Red"></asp:RequiredFieldValidator>

<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" 
    OnUploadComplete="AjaxFileUpload1_UploadComplete"
    OnClientUploadCompleteAll="JSUpldDoneAll"
    Width="50%" 
    ValidationGroup="UploadValidation"
    CausesValidation="true" />

这样点击上传按钮时会先触发验证，没填的话会显示错误提示，自动阻止上传流程，不会影响你原本的上传后代码。

关键提示 #

如果你的TextBox是ASP.NET服务器控件（带runat="server"），JS里获取元素时必须用<%= TxtUplBy.ClientID %>，因为ASP.NET会根据页面结构自动生成客户端ID，直接写TxtUplBy会找不到元素。

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