Bootstrap模态框JS验证时保持打开及表单跳转异常问题

嘿，我来帮你搞定这个头疼的问题！你的核心需求是让模态框在表单验证失败时保持打开，只有验证通过才跳转，问题出在事件对象的拼写错误和阻止默认提交动作的逻辑不严谨上，我给你梳理下修正方案：

问题分析 #

你代码里的evt和event变量混用了（比如if(evt.preventDefault)后面用了event.preventDefault()），这会导致浏览器报错，没法正确阻止表单的默认提交行为——而表单提交会触发页面刷新/跳转，模态框自然就跟着关闭了。

修正后的完整代码 #

// 先给表单绑定submit事件，确保拿到正确的事件对象
document.getElementById('updteform').addEventListener('submit', function(evt) {
  var myForm = this; // 直接用this指代当前表单元素，更清晰
  var condition = true;

  // 密码匹配验证逻辑
  if (myForm.pass1.value !== myForm.pass.value) {
    alert("Password Doesn't Match, Please try again.");
    myForm.pass1.focus();
    condition = false;
  }

  // 验证不通过时，彻底阻止表单默认提交动作
  if (!condition) {
    evt.preventDefault(); // 统一用函数参数里的evt，避免变量混淆
    // 不用额外操作模态框！只要页面不刷新，模态框会自动保持打开状态
  }

  // 验证通过的话，会执行表单默认的提交跳转逻辑
});

关键注意点 #

• 统一事件对象：全程使用函数参数传递的evt，不要混用event，否则会出现未定义错误，导致阻止默认动作失效。
• 阻止默认行为的时机：在验证失败后立即调用evt.preventDefault()，这会阻止表单提交的默认行为（页面刷新/跳转），模态框因为没有触发页面刷新，会保持打开状态。
• 无需手动控制模态框：只要页面不刷新，Bootstrap模态框不会自动关闭，所以不用额外调用modal('show')之类的方法。

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