如何使用JavaScript覆盖表单验证，点击返回按钮不触发校验

问题根因 #

form标签内的button元素未指定type属性时，浏览器默认将其判定为提交按钮，点击后会触发表单提交逻辑，连带触发表单校验，所以会弹出必填提示。

修复方案 #

只需给返回按钮显式指定type="button"，告知浏览器这是普通操作按钮，不需要触发表单提交即可解决问题。

修改后的核心代码 #

1. HTML部分（仅修改返回按钮代码）

<!-- 修改前 -->
<!-- <button onclick="goBack()">Go Back</button> -->
<!-- 修改后 -->
<button type="button" onclick="goBack()">返回</button>

2. 可选增强处理（避免特殊场景异常）

如果担心事件冒泡偶发触发提交，可以修改goBack函数，增加阻止默认事件逻辑：

function goBack(event) {
  event.preventDefault();
  event.stopPropagation();
  window.history.back();
}

对应按钮的点击事件调整为传事件对象：

<button type="button" onclick="goBack(event)">返回</button>

额外代码优化提示 #

你现有代码中把required属性写在了form标签上，这个属性仅对input/select等表单输入元素生效，写在form标签上属于无效属性，可直接删除，不影响原有功能。

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