点击Go Back按钮时取消必填输入字段校验的技术问询

这个问题的核心原因是：在<form>标签内的<button>元素，默认的type属性是submit——也就是说，你点击这个"Go Back"按钮时，浏览器会默认把它当成提交按钮，触发表单的提交流程，自然就会触发必填字段的校验了。

下面给你几个简单的解决办法，按推荐程度排序：

方法1：给Go Back按钮指定type="button" #

这是最直接且推荐的方案，明确告诉浏览器这个按钮只是普通按钮，不会触发表单提交：

修改你的按钮代码：

<button class="btn btn-warning btn-lg" type="button" onclick="goBack()">Go Back</button>

这样点击按钮时只会执行goBack()函数，不会触发任何表单校验逻辑。

方法2：在goBack函数中阻止默认行为 #

如果因为某些原因不能修改按钮的type，可以在点击事件中阻止浏览器的默认提交行为：

首先修改你的JavaScript函数：

function goBack(event) {
  // 阻止表单提交的默认行为
  event.preventDefault();
  // 执行你的返回逻辑，比如返回上一页
  window.history.back();
}

然后修改按钮，把事件对象传进去：

<button class="btn btn-warning btn-lg" onclick="goBack(event)">Go Back</button>

方法3：将Go Back按钮移出表单标签 #

如果布局允许，把"Go Back"按钮放到<form>标签外面，这样它就和表单没有关联，点击时自然不会触发表单校验：

<form>
  <input type="text" class="form-control" id="formGroupExampleInput" name="nameofcontract" placeholder="Name of Contract" required>
  <button class="btn btn-danger btn-lg" type="submit">Submit</button>
</form>
<!-- 把Go Back按钮移到form外面 -->
<button class="btn btn-warning btn-lg" onclick="goBack()">Go Back</button>

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