如何使用jQuery实现输入框内容变化时实时修改提交按钮样式

你的代码仅在页面DOM加载完成时执行1次取值判断，没有监听输入框的内容变化事件，因此后续输入内容时不会触发校验逻辑更新按钮样式，调整方案如下：

修正后代码 #

jQuery(function($){
    // 封装表单校验和按钮样式修改逻辑
    function checkFormValid() {
        var teamname = $('#acff-post-acfef_2207cc4_title').val();
        if(teamname !== ''){
            $('.acff-submit-button').css('background-color', 'red');
        } else {
            // 输入内容清空时恢复按钮默认样式，可根据实际需求调整
            $('.acff-submit-button').css('background-color', '');
        }
    }

    // 绑定输入框实时变化事件，所有内容变更（打字、粘贴、剪切、选词等）都会触发
    $('#acff-post-acfef_2207cc4_title').on('input', checkFormValid);

    // 页面加载完成先执行一次校验，适配浏览器自动填充、编辑页初始有值的场景
    checkFormValid();
});

多字段扩展说明 #

后续需要校验所有表单输入项时，只需要在checkFormValid函数内补充所有必填字段的非空判断，全部字段满足校验条件时再修改按钮样式即可。

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