基于jQuery的多步表单：必填项全填后返回上一步，如何避免Next按钮重新禁用

原有校验逻辑只在输入框触发keyup事件时运行：

• 按钮初始状态就是disabled
• 切回上一步的过程中，没有任何输入操作触发keyup事件，校验逻辑根本不会执行
• 哪怕所有必填项的值已经被留存、被Vue的双向绑定同步到输入框上，也没有逻辑主动去判断值的完整性、更新按钮状态
• 只有用户手动在输入框敲一下键盘触发keyup，才会跑校验激活按钮

核心思路是把校验逻辑从单一的输入事件回调里抽离出来，改成可以随时主动调用的独立函数，在所有需要更新按钮状态的节点都跑一次校验。

修复后的完整代码：

$(document).ready(function (){
    // 独立的必填项校验函数，可重复调用
    function validateStepFields() {
        // 一次性读取所有必填项的值，减少DOM重复查询
        const categoryVal = $("#id_post_type").val().trim();
        const titleVal = $("#title").val().trim();
        const addressVal = $("#id_post_address").val().trim();

        // 所有项非空时启用按钮
        if (categoryVal && titleVal && addressVal) {
            $("#confirm_button_login")
                .prop("disabled", false)
                .css("background-color", "#01ABAA");
        } else {
            $("#confirm_button_login").prop("disabled", true);
        }
    }

    // 绑定用户手动输入相关的事件，实时响应输入变化
    $('#id_post_type, #title, #id_post_address')
        .on("keyup change blur", validateStepFields);

    // 页面加载完成立刻执行一次校验，初始化按钮状态
    validateStepFields();
});

针对切回上一步的场景，只需要在你原有步骤切换的逻辑里，当当前步骤的DOM完全显示出来之后，加一行主动调用：

validateStepFields();

也就是说不管是用户切回上一步、还是程序动态给输入框赋值，只要在当前步骤渲染完成的时候跑一次这个校验函数，按钮就会立刻根据已填内容的状态自动启用/禁用，不需要等用户重新输入。

另外补充两个适配你现有Vue写法的细节：

• 别只绑定keyup事件：代码里加了change和blur事件监听，刚好匹配你v-model.lazy的输入框——这类输入框本来就是失焦时才同步值到Vue实例，加上事件监听后，失焦完成值同步的瞬间就会触发校验，不会漏判
• 取值时加.trim()是为了避免用户全输空格的情况被误判为已填写，比原来只判断val().length的逻辑更严谨

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