所有表单字段填写完成后显示div的JS代码在JSFIDDLE正常但站点无效怎么办

常见失效原因 #

• 代码执行时机错误：JSFiddle默认会将JS代码放在DOM加载完成后执行，直接部署到网站时，代码在对应输入框渲染完成前就运行，事件绑定直接失效。
• 校验范围错误：allFilled 函数默认校验页面所有input，若存在其他未填写的无关input（比如隐藏的表单字段、其他模块的输入框），会导致校验永远返回false。
• 事件覆盖不全：只绑定了keyup事件，没有覆盖粘贴、浏览器自动填充表单的场景，这两类操作不会触发keyup，就算所有字段填完也不会触发显示逻辑。
• 隐藏方式不匹配：若.next2 元素是用visibility: hidden或opacity: 0隐藏的，jQuery的show()方法只能修改display属性，无法使其显示。

// 包裹在DOM就绪回调中，确保所有DOM元素加载完成后再执行逻辑
$(function() {
    // 提前缓存需要校验的必填输入框，避免重复DOM查询
    const $requiredInputs = $('#name, #prenom, #password, #confirm_password, #email, #confirm_email');
    // 同时绑定keyup、input事件，覆盖手动输入、粘贴、自动填充场景
    $requiredInputs.on('keyup input', function() {
        // toggle方法可直接根据布尔值控制显示/隐藏，删除内容时也会自动隐藏.next2
        $('.next2').toggle(allFilled());
    });
    // 页面加载后先执行一次校验，兼容浏览器自动填充表单的情况
    $('.next2').toggle(allFilled());

    function allFilled() {
        let filled = true;
        // 仅校验指定的必填输入框，排除无关input干扰，增加trim避免空空格判断失误
        $requiredInputs.each(function() {
            if($(this).val().trim() === '') filled = false;
        });
        return filled;
    }
})

额外确认项 #

• 确认页面已经提前引入jQuery库，引入位置必须在上述自定义JS代码之前。
• 确认.next2 元素初始样式设置的是display: none，如果使用其他隐藏方式可以对应修改显示逻辑。

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