表单验证通过后页面无法跳转：问题原因及解决方法

问题原因 #

你的代码存在两个关键问题：

1. 表单验证通过时，未阻止表单的默认提交行为——表单提交的默认逻辑会触发页面刷新（或向action地址提交数据），这会直接中断你设置的window.location跳转，导致页面仅短暂输出日志后刷新，无法完成跳转。
2. 代码中的#console.log("test")是语法错误，JavaScript的单行注释应使用//而非#。

修复后的代码 #

(function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms)
      .forEach(function (form) {
        form.addEventListener('submit', function (event) {          
          
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          } else{
            event.preventDefault(); // 阻止表单默认提交行为，确保跳转生效
            window.location = "newpage.html";
            console.log("test"); // 修正注释语法，若需关闭日志可改为// console.log("test")
          }
          
          form.classList.add('was-validated')
        }, false)
      })
  })()

核心修复说明 #

• 在验证通过的分支中添加event.preventDefault()：彻底阻止表单的默认提交逻辑，让跳转代码能正常执行。
• 修正注释语法：将错误的#替换为JavaScript标准注释符号，避免控制台报错影响代码运行。

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