如何用HTML5 Button提交ASP.NET表单且不触发验证

你遇到的问题其实是客户端HTML5表单验证和ASP.NET服务器端验证的双重触发问题——你的代码只处理了服务器端的验证开关，但客户端的HTML5验证还是会自动生效。下面给你两种完全符合需求的方案，既能用HTML5 Button嵌入图片/HTML文本，又能彻底跳过所有验证：

方案一：手动提交表单并禁用客户端验证 #

这种方法通过JavaScript拦截按钮的默认提交行为，手动提交时关闭客户端验证，同时确保服务器端也不触发验证：

前端代码 #

<form runat="server" id="mainForm">
  <!-- 示例验证元素 -->
  <asp:TextBox runat="server" ID="txtUsername" Required="true"></asp:TextBox>
  <asp:RequiredFieldValidator runat="server" ControlToValidate="txtUsername" ErrorMessage="请输入用户名"></asp:RequiredFieldValidator>

  <!-- 带HTML内容的HTML5按钮 -->
  <button runat="server" id="submitBtn" type="submit" onclick="return submitWithoutValidation();">
    <img src="submit-icon.png" alt="提交图标" style="width:20px; vertical-align:middle;"> 点击提交
  </button>
</form>

<script>
function submitWithoutValidation() {
  // 获取当前表单实例
  const form = document.getElementById('<%= mainForm.ClientID %>');
  // 关闭HTML5客户端验证
  form.noValidate = true;
  // 手动提交表单
  form.submit();
  // 阻止默认提交行为，避免双重提交
  return false;
}
</script>

服务器端设置 #

在后台代码中确保按钮的CausesValidation属性为false，可以在页面初始化时配置：

protected void Page_Init(object sender, EventArgs e)
{
    submitBtn.CausesValidation = false;
    // 绑定服务器端点击事件（如果需要处理提交逻辑）
    submitBtn.ServerClick += SubmitBtn_ServerClick;
}

protected void SubmitBtn_ServerClick(object sender, EventArgs e)
{
    // 这里写你的提交处理逻辑，不会触发任何ASP.NET表单验证
    Response.Write("表单已提交，未触发验证");
}

方案二：用type="button"触发ASP.NET回发 #

把按钮类型改为button避免默认提交行为，然后通过ASP.NET内置的__doPostBack函数触发回发，同时指定不验证：

前端代码 #

<form runat="server" id="mainForm">
  <!-- 示例验证元素 -->
  <asp:TextBox runat="server" ID="txtEmail" Required="true"></asp:TextBox>
  <asp:RequiredFieldValidator runat="server" ControlToValidate="txtEmail" ErrorMessage="请输入邮箱"></asp:RequiredFieldValidator>

  <!-- 带HTML内容的HTML5按钮 -->
  <button runat="server" id="submitBtn" type="button" onclick="__doPostBack('<%= submitBtn.UniqueID %>', '');">
    <span style="color:green;">自定义样式的</span>提交按钮
  </button>
</form>

服务器端设置 #

同样需要设置CausesValidation为false，确保服务器端不执行验证：

protected void Page_Init(object sender, EventArgs e)
{
    submitBtn.CausesValidation = false;
    submitBtn.ServerClick += SubmitBtn_ServerClick;
}

protected void SubmitBtn_ServerClick(object sender, EventArgs e)
{
    // 处理提交逻辑
}

为什么你的原代码会触发验证？ #

你之前的代码中type="submit"会自动触发HTML5客户端表单验证（比如带required属性的输入框），而CausesValidation="false"只控制ASP.NET的服务器端验证，所以客户端的验证提示会先弹出来。上面的两种方案都同时解决了客户端和服务器端的验证触发问题，完全满足你的需求。

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