本文详解如何在使用 JavaScript 进行前端表单验证后，确保验证通过时正常提交并跳转至 action 指定的目标页面（如 page3.html），避免因误用 e.preventDefault() 导致跳转失效。

本文详解如何在使用 javascript 进行前端表单验证后，确保验证通过时正常提交并跳转至 `action` 指定的目标页面（如 `page3.html`），避免因误用 `e.preventdefault()` 导致跳转失效。

在你的 HTML 表单中，

已正确设置了 action="./page3.html" 和 method="POST"，理论上点击提交按钮应触发浏览器默认的表单提交行为——即跳转到 page3.html。但你发现点击“Next”按钮后仅执行了 JS 验证，却未跳转，根本原因在于当前 JavaScript 代码中 无条件调用了 e.preventDefault()：

form.addEventListener('submit', e => {
    e.preventDefault(); // ❌ 无论验证是否通过，都阻止了默认提交！
    validateInputs();
});

这导致表单永远无法真正提交，自然也就不会跳转。

✅ 正确做法是：仅在验证失败时阻止提交；验证成功时允许浏览器执行默认跳转行为。为此，需让 validateInputs() 函数返回一个布尔值（true 表示全部校验通过，false 表示存在错误），并在事件监听器中据此决定是否调用 e.preventDefault()。

✅ 修改步骤如下：

1. 修改 validateInputs() 函数，添加返回值

在函数末尾添加逻辑判断，并返回 true 或 false：

Js登陆注册表单设计代码

分享一款js左右晃动切换登陆注册表单设计代码，简洁利落的ui和滑动切换设计适用于任何网站的登陆注册。

下载

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; // ✅ 返回校验结果
};

2. 更新表单提交事件监听器

仅在验证失败时阻止默认行为，否则放行：

form.addEventListener('submit', e => {
    if (!validateInputs()) {
        e.preventDefault(); // ❌ 验证失败 → 阻止跳转，留在当前页提示错误
    }
    // ✅ 验证成功 → 不调用 preventDefault()，浏览器自动提交并跳转
});

3. 补充说明：关于 method="POST" 与静态页面

你当前使用的是 method="POST" 并指向 ./page3.html。注意：纯静态 HTML 页面无法接收 POST 数据（浏览器会跳转，但 page3.html 中无法通过 JS 直接读取上一页提交的表单字段）。若只需跳转展示，此方式可行；若需传递数据，建议：

• 方案 A（推荐轻量场景）：改用 method="GET"，数据将附加在 URL 查询参数中（如 page3.html?firstname=John&email=john@example.com），可在 page3.html 中用 URLSearchParams 解析；
• 方案 B（需服务端支持）：搭配 PHP/Node.js 等后端处理 POST 请求并重定向或渲染新页面。

⚠️ 注意事项

• ID 唯一性：HTML 中多个
  和

  违反 DOM ID 唯一原则，应改为 class（如 class="input-control" 和 class="error"），并在 JS 中用 querySelectorAll 或父级定位获取对应错误元素；
• 电话正则优化：当前 isValidPhone 正则较严格，建议测试真实号码格式，必要时放宽（例如支持 +966 5X XXX XXXX 等常见格式）；
• 用户体验增强：可添加提交按钮禁用状态（button.disabled = true）防止重复点击，验证完成后恢复。

完成上述修改后，表单将在所有字段验证通过时自动提交并跳转至 page3.html；任一字段失败则高亮错误、阻止跳转，完美兼顾验证与导航需求。