JavaScript表单提交事件中页面重定向失效问题求助

你的代码问题出在表单默认提交行为未被阻止——当所有校验通过时，你设置了页面重定向，但表单的默认提交操作（比如跳转到form标签action属性指定的地址，或刷新当前页）会优先执行，直接覆盖了你的重定向逻辑。

修复方案一：通过校验时阻止默认行为再跳转 #

修改else分支的代码，先调用e.preventDefault()阻止表单提交，再执行重定向：

let form = document.querySelector("form");

form.addEventListener("submit", (e) => {
      const map_not_uploaded = document.getElementById("map").value == "";
      const bugs_not_uploaded = (document.getElementById("bug1").value == "") || (document.getElementById("bug2").value == "");

      if (map_not_uploaded) {
            alert("Must upload map file");
            e.preventDefault();
      }
      else if (bugs_not_uploaded) {
            alert("Must upload both bug files");
            e.preventDefault();
      }
      else {
            e.preventDefault(); // 阻止表单默认提交
            window.location.href = "new.html";
      }
});

修复方案二：统一提前阻止默认行为 #

如果你的表单不需要向服务器提交数据，仅做客户端校验后跳转，可以在事件处理函数开头就统一阻止默认提交行为，避免遗漏：

let form = document.querySelector("form");

form.addEventListener("submit", (e) => {
      e.preventDefault(); // 先阻止所有默认提交行为
      const map_not_uploaded = document.getElementById("map").value == "";
      const bugs_not_uploaded = (document.getElementById("bug1").value == "") || (document.getElementById("bug2").value == "");

      if (map_not_uploaded) {
            alert("Must upload map file");
      }
      else if (bugs_not_uploaded) {
            alert("Must upload both bug files");
      }
      else {
            window.location.href = "new.html";
      }
});

额外提醒：检查你的form标签是否设置了action属性，如果有，默认提交会跳转到该地址，一定要确保默认行为被阻止才能让重定向生效。

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