表单验证时JS Alert弹窗重复触发问题排查

核心原因 #

你用addEventListener绑定表单submit事件，但验证函数里的return false无法阻止默认表单提交行为——这种写法仅在传统onsubmit属性绑定场景下有效。同时，表单可能因默认提交行为再次触发验证（比如浏览器默认校验与自定义校验冲突，或事件被重复绑定），导致弹窗重复出现。

修复步骤 #

1. 阻止默认提交行为
   修改formValidation函数，接收事件参数并调用event.preventDefault()拦截默认提交：

   function formValidation(event) {
       // 先阻止表单默认提交
       event.preventDefault();
       
       // 重置所有输入框边框样式，清除之前的错误标记
       document.querySelectorAll("#editform input").forEach(input => {
           input.style.border = "";
       });
   
       // 获取表单元素与值
       var tfn = document.getElementById("TeacherFName");
       var tln = document.getElementById("TeacherLName");
       var ts = document.getElementById("Salary");
       var ten = document.getElementById("EmployeeNumber");
   
       var fNameValue = tfn.value;
       var lNameValue = tln.value;
       var salaryValue = ts.value;
       var empNumValue = ten.value;
   
       // 验证逻辑
       if (fNameValue.trim() === "") {
           alert("First Name field is required.");
           tfn.style.border = "1px solid red";
           return;
       } else if (lNameValue.trim() === "") {
           alert("Last Name field is required.");
           tln.style.border = "1px solid red";
           return;
        } else if (salaryValue.trim() === "") {
           alert("Salary field is required.");
           ts.style.border = "1px solid red";
           return;
       } else if  (empNumValue.trim() === "") {
           alert("Employee Number field is required.");
           ten.style.border = "1px solid red";
           return;
       }   
       // 验证通过，手动提交表单
       event.target.submit();
   }
   

2. 避免事件重复绑定
   将window.onload改为addEventListener绑定，同时添加移除已有绑定的逻辑，防止重复绑定：

   window.addEventListener("load", formCheck);
   
   function formCheck() {
       var form = document.getElementById("editform");
   
       if (form) {
           form.removeEventListener("submit", formValidation);
           form.addEventListener("submit", formValidation);
       } else {
           console.error("No edit form found. Script will not run.");
       }
   };
   

3. 检查脚本引入情况
   确认JS脚本在HTML中仅被引入一次，重复引入会导致事件被绑定两次，触发两次弹窗。

额外优化建议 #

• 替换alert为页面内的错误提示元素（比如输入框下方的文字提示），提升用户体验；
• 统一管理输入框样式，避免用户修正错误后红色边框残留。

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