本文详解如何在保留表单前端验证逻辑的前提下，确保验证成功时正常提交并跳转至指定页面（如 page3.html），避免因 e.preventdefault() 意外阻断默认行为导致重定向失效。

本文详解如何在保留表单前端验证逻辑的前提下，确保验证成功时正常提交并跳转至指定页面（如 page3.html），避免因 e.preventdefault() 意外阻断默认行为导致重定向失效。

在你的代码中，表单使用了

，本应自然触发页面跳转。但问题根源在于 JavaScript 中 无条件调用了 e.preventDefault() ——无论验证是否通过，表单的默认提交行为都被强制阻止，因此即使所有字段合法，也无法跳转。

✅ 正确做法：仅在验证失败时阻止提交

你需要修改事件监听逻辑，使 e.preventDefault() 仅在验证未通过时执行。关键改动如下：

1. 让 validateInputs() 返回布尔值，标识整体验证是否通过；
2. 在 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 属性：你已正确设置了 ，这是客户端跳转的基础；无需额外 window.location.href 或 form.submit()。
• method="POST" 在纯前端跳转中无实际影响：因未连接后端，该属性不会发送数据，但不影响跳转。若后续需传参，建议改用 GET 并配合 URL 查询参数，或改用 AJAX + 后端处理。
• 重复 ID 问题需修复：你的多个
  和

  使用了相同 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>

• 按钮类型确认： 是正确的，确保它位于
  内且未被 disabled 或 JS 禁用。

✅ 验证通过后会发生什么？

当用户点击「Next」按钮：


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 浏览器触发 submit 事件；
• JS 执行 validateInputs()，若全部通过则返回 true；
• if (!validateInputs()) 判断为 false，e.preventDefault() 不执行；
• 表单按原生逻辑提交：浏览器向 ./page3.html 发起 GET 请求（method="POST" 在无服务端时仍表现为导航），页面顺利跳转。

? 提示：若未来需将表单数据传递至 page3.html，可在跳转前用 localStorage 临时保存，或改用 GET 方法（如

），数据将作为 URL 参数自动附加。

遵循以上修改，你的表单即可实现「验证不通过时留驻提示、验证通过时干净跳转」的预期行为，兼顾用户体验与功能完整性。