如何在表单字段为空时禁用提交按钮？代码控制台生效但WordPress失效

代码失效的核心原因及修复方案 #

常见失效原因 #

• 你原代码中选择器里的"是HTML转义后的双引号字符，&&是转义后的与运算符，JS执行时无法识别这些转义字符，导致选择器找不到对应表单字段、判断逻辑直接报错
• 操作布尔属性disabled用attr()的兼容性不如prop()，部分场景下会出现属性修改后界面不生效的问题
• 仅监听了keyup和blur事件，没有覆盖浏览器自动填充、字段被其他脚本修改的场景
• 初始加载时没有执行一次校验逻辑，如果页面加载时已有浏览器自动填充的内容，按钮会保持禁用状态
• 直接选择所有button元素范围太广，容易误伤页面其他位置的功能按钮
• 如果你的表单是动态渲染的（比如懒加载、弹窗内加载的表单），document.ready执行时表单元素还未加载，会导致事件绑定失效

修正后的代码 #

var $ = jQuery.noConflict();

$(document).ready(function() {
  // 可替换为你实际的提交按钮选择器，缩小范围避免误操作
  const $submitBtn = $('button[type="submit"]');
  // 所有必填字段的选择器
  const requiredFields = [
    '[data-wof-field~="primary_email"]',
    '[data-wof-field~="text_2"]',
    '[data-wof-field~="number_1"]',
    '[data-wof-field~="text_1"]'
  ];

  // 通用校验函数
  function checkFormValid() {
    let isValid = true;
    requiredFields.forEach(field => {
      // 加trim处理，避免用户输入空格被判定为已填写
      const val = $(field).val()?.trim();
      if (!val) {
        isValid = false;
      }
    });
    $submitBtn.prop('disabled', !isValid);
  }

  // 初始状态先执行一次校验
  checkFormValid();

  // 绑定多类触发事件，覆盖输入、失焦、内容变更、自动填充场景，事件委托兼容动态加载的表单
  $(document).on('input blur change', requiredFields.join(','), checkFormValid);
});

操作注意事项 #

插入脚本时不要对代码做HTML转义，确保代码中的引号、逻辑运算符都是原生JS格式，不要出现"、&&这类转义字符。如果还是不生效，可以打开浏览器控制台排查是否有其他JS报错，优先解决报错后再测试功能。

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