本文详解如何在保留表单前端验证逻辑的前提下，确保验证成功时正常提交并跳转至指定页面（如 page3.html），避免因 e.preventdefault() 意外阻断默认行为导致重定向失效。
本文详解如何在保留表单前端验证逻辑的前提下，确保验证成功时正常提交并跳转至指定页面（如 page3.html），避免因 e.preventdefault() 意外阻断默认行为导致重定向失效。
在你的代码中，表单使用了 <form action="./page3.html" method="POST">，本应自然触发页面跳转。但问题根源在于 JavaScript 中 无条件调用了 e.preventDefault() ——无论验证是否通过，表单的默认提交行为都被强制阻止，因此即使所有字段合法，也无法跳转。
✅ 正确做法：仅在验证失败时阻止提交
你需要修改事件监听逻辑，使 e.preventDefault() 仅在验证未通过时执行。关键改动如下：
- 让 validateInputs() 返回布尔值，标识整体验证是否通过；
- 在 submit 事件中根据返回值决定是否阻止默认行为。
✅ 修改后的 JavaScript（核心部分）
const form = document.getElementById('form');
const firstname = document.getElementById('firstname');
const lastname = document.getElementById('lastname');
const email = document.getElementById('email');
const tely = document.getElementById('tely');
// ✅ 关键：validateInputs 现在返回 true（验证通过）或 false（存在错误）
const validateInputs = () => {
let isValid = true;
const firstnameValue = firstname.value.trim();
const lastnameValue = lastname.value.trim();
const emailValue = email.value.trim();
const telyValue = tely.value.trim();
if (firstnameValue === '') {
setError(firstname, 'First Name is required');
isValid = false;
} else {
setSuccess(firstname);
}
if (emailValue === '') {
setError(email, 'Email is required');
isValid = false;
} else if (!isValidEmail(emailValue)) {
setError(email, 'Provide a valid Email address');
isValid = false;
} else {
setSuccess(email);
}
if (lastnameValue === '') {
setError(lastname, 'Last Name is required');
isValid = false;
} else {
setSuccess(lastname);
}
if (telyValue === '') {
setError(tely, 'Phone Number is required');
isValid = false;
} else if (!isValidPhone(telyValue)) {
setError(tely, 'Phone Number must be of 10 characters');
isValid = false;
} else {
setSuccess(tely);
}
return isValid; // ? 显式返回验证结果
};
// ✅ 关键：仅当验证失败时才阻止默认提交
form.addEventListener('submit', e => {
if (!validateInputs()) {
e.preventDefault(); // 验证失败 → 阻止跳转，留在当前页提示错误
}
// 验证成功 → 不调用 preventDefault() → 浏览器按 form action 自动跳转
});⚠️ 注意事项与最佳实践
- 不要移除 action 属性：你已正确设置了 <form action="./page3.html">，这是客户端跳转的基础；无需额外 window.location.href 或 form.submit()。
- method="POST" 在纯前端跳转中无实际影响：因未连接后端，该属性不会发送数据，但不影响跳转。若后续需传参，建议改用 GET 并配合 URL 查询参数，或改用 AJAX + 后端处理。
-
重复 ID 问题需修复：你的多个 <div id="all"> 和 <div class="error" id="er"> 使用了相同 id（如 er），违反 HTML 唯一性规范，会导致 querySelector 只匹配第一个元素。请将 id="er" 改为 class="error"（你 CSS 中也已用 .error），并确保每个 .input-control 内部的 .error 元素唯一可定位（当前结构已满足，只需删掉重复 id）：
<!-- ❌ 错误（重复 id） --> <div class="input-control" id="all"> <div class="error" id="er"></div> </div> <!-- ✅ 正确（移除 id，依赖 class） --> <div class="input-control"> <div class="error"></div> </div> - 按钮类型确认：<button type="submit"> 是正确的，确保它位于 <form> 内且未被 disabled 或 JS 禁用。
✅ 验证通过后会发生什么？
当用户点击「Next」按钮：
- 浏览器触发 submit 事件；
- JS 执行 validateInputs()，若全部通过则返回 true；
- if (!validateInputs()) 判断为 false，e.preventDefault() 不执行；
- 表单按原生逻辑提交：浏览器向 ./page3.html 发起 GET 请求（method="POST" 在无服务端时仍表现为导航），页面顺利跳转。
? 提示：若未来需将表单数据传递至 page3.html，可在跳转前用 localStorage 临时保存，或改用 GET 方法（如 <form action="./page3.html" method="GET">），数据将作为 URL 参数自动附加。
立即学习“Java免费学习笔记（深入）”；
遵循以上修改，你的表单即可实现「验证不通过时留驻提示、验证通过时干净跳转」的预期行为，兼顾用户体验与功能完整性。
