表单验证通过后触发函数问题：交互式信用卡开发求助

我在Frontend Mentor的挑战中开发交互式信用卡展示组件，需求是所有输入内容验证通过后点击提交按钮，显示感谢div并隐藏表单。但提交逻辑里的if判断（代码中标记//// Need Help Here的位置）存在问题，相关代码如下：

form.addEventListener('submit', (e) => {
    e.preventDefault();
    cardValidation()
    addHtml()
    if(cardValidation(validSign(5))) //// Need Help Here.
    {
        passForm()
    }
}) 

function cardValidation() {

    const name = input_name.value.trim()
    const cardNumber = input_card_number.value.trim()
    const month = input_month.value.trim()
    const year = input_year.value.trim()
    const cvc = input_cvc.value.trim()

    let nameValid = /^[a-z\u00C0-\u02AB'´`]+\.?\s([a-z\u00C0-\u02AB'´`]+\.?\s?)+$/i
    let cardNumValidation = /^[0-9]{16}$/
    let cvcValid = /[0-9]{3}$/
    let monthValid = /^((0[1-9])|(1[0-2]))$/
    let yearValid = /^((0[1-9])|(1[0-9])|(2[0-9]|3[0-9]))$/

    const errorName = 'John Monroe Doe'
    const errorNumberCard = '0000000000000000'
    const errorMonth = '00'
    const errorYear = '00'
    const errorCVC = '000'

    if(name === '') {
        errorSign(input_name)
        nameHTML = errorName
        error++
    } else if (name.match(nameValid)){
        nameHTML = name
        validSign(input_name)
    } else {
        errorSign(input_name)
        nameHTML = errorName
        error++
    }
    
    if(cardNumber.match(cardNumValidation)){
       numberHtml = cardNumber
       validSign(input_card_number)
    }else {
        numberHtml = errorNumberCard
        errorSign(input_card_number)
        error++
    }

    if(month.match(monthValid)){
        monthHtml = month
        validSign(input_month)
    } else {
        errorSign(input_month)
        monthHtml = errorMonth
        error++
    }
    if(cvc.match(cvcValid)){
        cvcHtml = cvc
        validSign(input_cvc)
    }else {
        errorSign(input_cvc)
        cvcHtml = errorCVC
        error++
    }
    if(year.match(yearValid)){
        yearHtml = year
        validSign(input_year)
    }else {
        errorSign(input_year)
        yearHtml = errorYear
        error++
    }

    if(error > 0) {
        const errorNotification = document.querySelector("small")
        errorNotification.classList = 'error-notification'
    }
}

function addHtml() {
    const card_number = document.getElementById('js-card-number')
    const card_name = document.getElementById('js-card-name')
    const card_month = document.getElementById('js-card-expire-month')
    const card_year = document.getElementById('js-card-expire-year')
    const card_cvc = document.getElementById('js-card-cvc')

    card_name.innerHTML = `${nameHTML}`
    card_number.innerHTML = `${numberHtml}`
    card_month.innerHTML = `${monthHtml}`
    card_year.innerHTML = `${yearHtml}`
    card_cvc.innerHTML = `${cvcHtml}`
}

function errorSign(input){
    const formArea = input
    formArea.className = 'error'
}

function validSign(input){
    const formArea = input
    formArea.className = 'valid'
}

function passForm(){
    form.classList.add("finished-form")
    form.classList.add("thank-active")
}

注：我知道small元素的错误通知样式设计不佳，后续会进行修复。

问题分析 #

1. cardValidation()函数没有返回值，导致if判断中调用它时永远得到undefined，无法触发passForm()
2. 错误调用cardValidation(validSign(5))：cardValidation不需要参数，validSign是用于给输入框添加样式的函数，传入数字5毫无意义
3. error变量未初始化，每次提交会累加之前的错误计数，导致后续验证即使通过也会因为历史错误值大于0而失效

修复方案 #

1. 初始化错误计数并让验证函数返回结果

修改cardValidation函数，在开头初始化error为0，并在末尾返回验证是否通过：

function cardValidation() {
    let error = 0; // 初始化错误计数，避免累加
    const errorNotification = document.querySelector("small");
    errorNotification.classList.remove('error-notification'); // 重置错误提示状态

    // ... 原有验证逻辑保持不变

    if(error > 0) {
        errorNotification.classList.add('error-notification');
    }

    return error === 0; // 返回验证结果：无错误则返回true
}

2. 修正submit事件中的判断逻辑

去掉错误的参数传递，直接使用验证函数的返回值判断：

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const isAllValid = cardValidation(); // 获取验证结果
    addHtml();
    if(isAllValid) {
        passForm();
    }
})

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