form表单内submit按钮无法跳转至指定页面问题咨询

• 标签嵌套非法：HTML规范明确禁止在<a>标签内嵌套<button>元素，两个可交互元素嵌套会触发行为冲突，不同浏览器的处理逻辑不一致，是跳转异常的核心原因
• 表单默认行为冲突：你当前的<form>标签未配置action属性，submit按钮触发表单提交时，默认会请求当前页面地址，直接覆盖了<a>标签的跳转逻辑
• 按钮放在表单外无响应的原因：type="submit"的按钮只有归属到对应表单时才会触发提交行为，放在表单外不属于任何表单，点击后自然无任何响应，属于正常现象

方案1：使用原生form属性实现（最推荐，无额外代码） #

直接删除<button>外层嵌套的<a>标签，给<form>标签配置action属性为目标跳转地址，需要校验的输入框添加required属性即可，原生表单会自动完成校验+跳转逻辑：

<!-- 配置form的action属性为跳转地址 -->
<form action="file:///C:/Users/okazi/Desktop/Website/Html/createaccountPageStepTwo.html" method="get">
  <!-- 原有表单结构不变，给需要校验的input添加required属性 -->
  <input type="text" class="form-control" placeholder="First name" aria-label="First name" required>
  <input type="text" class="form-control" placeholder="Last name" aria-label="Last name" required>
  <!-- 其余input按需添加required -->
  <!-- 删除外层a标签，保留submit按钮 -->
  <button type="submit" class="btn btn-success buttonPos">Continue</button>
</form>

该方案完全遵循HTML原生规范，表单提交时会先触发所有带required属性的输入框校验，校验通过后自动跳转到action指定的页面。

方案2：JS监听提交事件（适合需要额外前置处理的场景） #

如果跳转前需要执行自定义逻辑（比如密码一致性校验、数据暂存等），可以监听表单的submit事件手动控制流程：

<form id="signupForm">
  <!-- 原有表单结构不变，input按需添加required属性 -->
  <button type="submit" class="btn btn-success buttonPos">Continue</button>
</form>
<script>
const signupForm = document.getElementById('signupForm')
signupForm.addEventListener('submit', function(e) {
  // 阻止默认提交行为
  e.preventDefault()
  // 手动触发原生表单校验
  if (this.checkValidity()) {
    // 校验通过后执行跳转
    window.location.href = 'file:///C:/Users/okazi/Desktop/Website/Html/createaccountPageStepTwo.html'
  } else {
    // 校验不通过时展示原生错误提示
    this.reportValidity()
  }
})
</script>

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