表单所有输入填写完成后启用提交按钮的问题排查

问题根因 #

• disabled状态变量定义在forEach循环内部，每个输入框的监听事件仅校验自身输入状态，只要当前触发输入事件的输入框不为空就会激活按钮，不会校验其余必填字段
• 缺少每次输入后全量遍历所有必填项的逻辑，无法判断「全部填写完成」的条件

修复方案 #

每次触发输入事件时，遍历所有必填输入框，判断所有字段是否都非空，再同步按钮的禁用状态：

checkInput()

function checkInput() {
    const inputs = document.querySelectorAll('.form-control')
    const button = document.querySelector('.submit-btn')

    // 统一校验逻辑，封装后可复用
    function validateAllInputs() {
        let allFilled = true
        // 遍历所有输入框，只要有一个为空就标记为未全部填写
        inputs.forEach(input => {
            // 加trim避免纯空格被判定为填写完成
            if (input.value.trim() === '') {
                allFilled = false
            }
        })
        // 同步按钮禁用状态
        button.disabled = !allFilled
    }

    // 同时绑定keyup和input事件，兼容键盘输入、粘贴、自动填充等场景
    inputs.forEach(input => {
        input.addEventListener('keyup', validateAllInputs)
        input.addEventListener('input', validateAllInputs)
    })
}

原有HTML代码无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Albi Çenga