Webflow双表单场景下基于输入值禁用按钮功能失效问题

这是JavaScript同名函数覆盖的基础特性导致的，和Webflow平台、内部变量命名都没关系：同一作用域下定义两个完全同名的checkform()函数时，后定义的函数会直接覆盖前一个，前一个函数的逻辑根本不会被执行，自然就出现了「永远只有写在后面的表单功能正常」的现象。

另外原代码还有两个隐藏bug：

• 遍历表单元素时没有过滤提交按钮、隐藏域、普通按钮这类不需要用户填写的元素，这类元素值为空会导致校验永远不通过
• disabled是布尔属性，直接赋值true/false即可，不需要传字符串"disabled"

直接替换你原来的两段同名函数代码即可，修复版处理了函数重名问题、补全了非输入项过滤逻辑、修正了属性赋值写法，同时加了自动事件绑定，不需要手动给每个输入框加触发事件：

// 静态表单校验逻辑
function checkJobsForm() {
    const formElements = document.forms["wf-form-jobs"].elements;
    let isFormFilled = true;
    for (let i = 0; i < formElements.length; i++) {
        const el = formElements[i];
        // 跳过不需要用户填写的元素
        if (['submit', 'hidden', 'button'].includes(el.type)) continue;
        if (el.value.trim().length === 0) isFormFilled = false;
    }
    document.getElementById("jobs-form-button").disabled = !isFormFilled;
}

// CMS表单校验逻辑
function checkCmsJobsForm() {
    const formElements = document.forms["wf-form-cms-jobs"].elements;
    let isFormFilled = true;
    for (let i = 0; i < formElements.length; i++) {
        const el = formElements[i];
        if (['submit', 'hidden', 'button'].includes(el.type)) continue;
        if (el.value.trim().length === 0) isFormFilled = false;
    }
    document.getElementById("jobs-form-cms-button").disabled = !isFormFilled;
}

// 页面加载完成后绑定事件、初始化按钮状态
window.addEventListener('DOMContentLoaded', () => {
    const staticForm = document.forms["wf-form-jobs"];
    const cmsForm = document.forms["wf-form-cms-jobs"];
    if (staticForm) {
        staticForm.addEventListener('input', checkJobsForm);
        checkJobsForm();
    }
    if (cmsForm) {
        cmsForm.addEventListener('input', checkCmsJobsForm);
        checkCmsJobsForm();
    }
})

• 把上述完整代码放到站点设置或者页面对应的「结束</body>标签前」自定义代码位置即可，不要拆分代码重复定义函数
• 如果后续CMS列表里会渲染多个同结构的招聘表单，不要给每个表单单独写校验函数，可以给这类表单加统一的自定义标识（比如data-form="jobs"），写一套通用循环逻辑批量绑定校验，减少重复代码也避免重名问题

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