bootstrap 5 表单验证失败不跳转是默认行为，关键需手动拦截 submit 事件并调用 e.preventdefault()；novalidate 仅禁用原生提示，不阻止提交；验证通过后须在 js 中显式跳转。
表单验证失败时页面不跳转，是 Bootstrap 5 的默认且正确行为——它本就不该跳转。真正的问题通常是：你期望“验证失败时不跳转”，但实际却发生了跳转；或相反，“验证通过后该跳转却没跳”。核心在于 novalidate、submit 事件拦截和手动跳转逻辑是否配对。
为什么加了 novalidate 表单还是跳转了
根本原因不是验证失效，而是你没阻止表单的默认提交行为。Bootstrap 不会自动拦截 submit；它只负责样式反馈。只要 <form></form> 没绑定 JS 事件并调用 e.preventDefault()，浏览器就会按 action 或当前 URL 提交，导致页面刷新或跳转。
-
novalidate只禁用浏览器原生弹窗，**不阻止表单提交** - 即使所有字段都标了
required，验证失败时表单仍会照常提交（除非你手动拦） - 常见误操作：只加
novalidate，没写addEventListener('submit', ...)
如何让验证失败时稳住页面不跳转
必须显式监听 submit 事件，并在验证失败时终止流程。关键不是“设置不跳转”，而是“主动拦截 + 条件放行”。
- 给
<form></form>添加id（如id="loginForm"），方便 JS 绑定 - 在
submit回调里先调this.checkValidity()，返回false就立刻e.preventDefault() - 验证失败时，可选调
this.reportValidity()触发浏览器原生提示（但通常不用，因与 Bootstrap 冲突） - 若用
.was-validated模式，验证失败后记得this.classList.add('was-validated')，否则.invalid-feedback不显示
验证通过后怎么跳转（而不是提交）
这是最容易混淆的点：验证通过 ≠ 自动跳转。你得在 JS 里写明跳转动作，否则表单就卡在当前页。
- 不要在按钮上写
onclick="location.href=..."—— 这会绕过验证，直接跳 - 必须把跳转逻辑放在
submit事件回调中、checkValidity() === true的分支内 - 跳转方式选
window.location.href = 'dashboard.html'或location.assign('dashboard.html') - 如果跳转前需发请求（如登录接口），务必用
async/await或Promise控制，避免未等响应就跳走
容易被忽略的 DOM 结构细节
哪怕 JS 和 CSS 全对，.invalid-feedback 也可能不出现——问题出在 HTML 结构是否满足 Bootstrap 的渲染前提。
-
.is-invalid类必须加在<input>、<select></select>或<textarea></textarea>上，**不能加在外层<div>** <li> <code>.invalid-feedback必须是对应表单控件的**紧邻下一个兄弟元素**（中间不能有空格、注释或其它标签） - 用了
form-floating？那.invalid-feedback得放在form-floating容器内部，且仍需紧邻控件 - 父容器若设了
display: flex或position: absolute，可能遮挡或偏移提示框，需检查计算后的offsetParent
