如何实现表单按钮需在input和textarea均填写后才启用？

核心调整点 #

• 新增对textarea的输入监听，确保输入变化时触发验证
• 重构验证逻辑：只有当所有目标input和textarea都填写了有效内容（非空且不是纯空格），才启用提交按钮
• 优化验证触发时机，覆盖键盘输入、粘贴等多种场景

修改后的完整代码 #

$(document).ready(function (){
    validate();
    // 监听input和textarea的keyup、input事件，覆盖多种输入场景
    $('input, textarea').on('keyup input', validate);
});

function validate(){
    let allFieldsFilled = true;
    
    // 遍历所有需要验证的元素：.form-control类的input + 所有textarea
    $('.form-control, textarea').each(function(){
        // 去除前后空格后判断是否为空
        if ($(this).val().trim().length === 0) {
            allFieldsFilled = false;
            return false; // 发现空字段就终止循环，提升效率
        }
    });
    
    // 根据验证结果设置按钮禁用状态
    $("button[type='disabled-on-empty-form']").prop("disabled", !allFieldsFilled);
}

补充说明 #

• 如果你的textarea也使用了form-control类，选择器可以简化为$('.form-control')，无需单独指定textarea
• 加入input事件是为了处理用户通过粘贴、拖拽文本等非键盘输入的情况，让验证更及时
• 使用trim()是为了避免用户只输入空格就被判定为已填写的无效情况

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