如何仅在所有字段验证通过时提交表单？附代码求助

核心问题 #

你遇到两个关键问题：

• 表单验证不通过时仍会提交跳转
• 缺少邮箱格式验证功能

问题根源与修复方案 #

1. 表单提交逻辑顺序错误 #

原代码先执行isFormValid()判断，再执行验证函数，导致判断时还未完成校验，无法正确识别错误状态。同时存在重复定义isFormValid()的无效代码。

2. 缺失邮箱格式验证 #

未实现邮箱格式校验逻辑，需添加正则匹配验证。

额外优化：密码确认字段属性冲突 #

原HTML中password-confirm的name设为password，会和密码字段的name重复，导致表单提交数据混乱，需修正为password-confirm。

修正后的完整代码 #

HTML代码 #

<div class="modal-content-right">
    <form action="https://www.w3schools.com/action_page.php" method="POST" class="modal-form" id="form">
        <h1>Register and start hunting! Create your account by filling out the information below.</h1>
        <div class="form-validation">
            <input type="text" class="modal-input" id="name" name="name" placeholder="Enter your name">
            <p>Error Message</p>
        </div>
        <div class="form-validation">
            <input type="email" class="modal-input" id="email" name="email" placeholder="Enter your email">
            <p>Error Message</p>
        </div>
        <div class="form-validation">
            <input type="password" class="modal-input" id="password" name="password" placeholder="Enter your password">
            <p>Error Message</p>
        </div>
        <div class="form-validation">
            <input type="password" class="modal-input" id="password-confirm" name="password-confirm" placeholder="Confirm your password">
            <p>Error Message</p>
        </div>
        <input type="submit" class="modal-input-btn" value="Sign-up">
        <span class="modal-input-login">Already have an account? Login <a href="#">here.</a></span>
    </form>
</div>

JavaScript代码 #

const form = document.getElementById('form');
const name = document.getElementById('name');
const email = document.getElementById('email');
const password = document.getElementById('password');
const passwordConfirm = document.getElementById('password-confirm');

// 显示错误信息
function showError(input, message) {
    const formValidation = input.parentElement;
    formValidation.className = 'form-validation error';
    const errorMessage = formValidation.querySelector('p');
    errorMessage.innerText = message;
}

// 显示验证通过状态
function showValid(input) {
    const formValidation = input.parentElement;
    formValidation.className = 'form-validation valid';
}

// 检查必填字段
function checkRequired(inputArr) {
    inputArr.forEach(function(input) {
        if(input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`);
        }
    });
}

// 获取字段名称（首字母大写）
function getFieldName(input) {
    return input.name.charAt(0).toUpperCase() + input.name.slice(1);
}

// 检查输入长度
function checkLength(input, min, max) {
    if(input.value.length < min) {
        showError(input, `${getFieldName(input)} must be at least ${min} characters`);  
    } else if (input.value.length > max) {
        showError(input, `${getFieldName(input)} must be less than ${max} characters`);
    } else{
        showValid(input);
    }
}

// 邮箱格式验证
function checkEmail(input) {
    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,}))$/;
    if(re.test(input.value.trim())) {
        showValid(input);
    } else {
        showError(input, 'Email is not valid');
    }
}

// 检查密码是否匹配
function passwordMatch(input1, input2) {
    if(input1.value !== input2.value) {
        showError(input2, 'Passwords do not match');
    } else {
        showValid(input2);
    }
}

// 判断表单是否有效
function isFormValid() {
    const inputContainers = form.querySelectorAll('.form-validation');
    let isValid = true;
    inputContainers.forEach((container) => {
        if(container.classList.contains('error')) {
            isValid = false;
        }
    });
    return isValid;
}

// 表单提交事件监听
form.addEventListener('submit', (e) => {
    // 先执行所有验证逻辑
    checkRequired([name, email, password, passwordConfirm]);
    checkLength(name, 4, 30);
    checkLength(password, 8, 25);
    checkEmail(email);
    passwordMatch(password, passwordConfirm);

    // 验证不通过则阻止默认提交跳转
    if(!isFormValid()) {
        e.preventDefault();
    }
});

关键修改说明 #

1. 调整验证执行顺序：先调用所有验证函数完成校验，再判断是否允许提交，避免提前判断导致的逻辑错误。
2. 添加邮箱验证函数：使用正则表达式校验邮箱格式，不符合则显示错误。
3. 修正密码确认字段name属性：避免表单数据提交时的字段冲突。
4. 优化验证逻辑：必填字段校验后不直接标记为valid，留待长度、格式等专项验证完成后统一设置状态，确保准确性。
5. 清理重复代码：删除无效的重复函数定义，保留有效实现。

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