带JavaScript验证的HTML表单提交后无法跳转页面的求助

你的核心问题是在表单提交事件里用e.preventDefault()完全阻止了默认提交行为，导致验证完成后不会触发跳转。只需在所有输入验证通过时手动触发表单提交，就能保留JS验证同时实现跳转。

修改后的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');

form.addEventListener('submit', e => {
    e.preventDefault();

    // 验证通过则提交表单
    if (validateInputs()) {
        form.submit();
    }
});

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

const isValidEmail = email => {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

const isValidPhone = tely => {
    const phone = /^(009665|9665|\+9665|05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/;
    return phone.test(tely);
}

const validateInputs = () => {
    const firstnameValue = firstname.value.trim();
    const lastnameValue = lastname.value.trim();
    const emailValue = email.value.trim();
    const telyValue = tely.value.trim();
    // 初始化验证状态为通过
    let isValid = true;

    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;
};

修改说明 #

1. 给validateInputs()函数新增返回值：初始化isValid为true，只要有一项验证失败就设为false，最后返回这个状态
2. 在表单提交事件监听中，判断validateInputs()的返回值，若为true则调用form.submit()触发表单的默认提交行为，跳转到page3.html

额外提示 #

你的HTML代码里存在多个重复的id="all"和id="er"，HTML规范要求页面中ID必须唯一，建议将这些重复ID改为class（比如class="all"、class="error"），避免后续出现DOM操作异常的问题。

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