如何用JavaScript验证WooCommerce结账表单并阻止非法提交？

你的问题核心在于没有正确拦截事件传递，且Fluid Checkout插件的按钮自带自定义提交逻辑，单纯返回false无法阻止表单继续处理。以下是针对性的修复方案：

修改后的验证代码 #

function validarForm(e) {
  var bronze = document.getElementById('section_g2e26i151r9_qtd_bronze').value;
  
  if (bronze != 12) {
    alert( "The total quantity must be equal to 12!" ); 
    // 阻止浏览器默认提交行为
    e.preventDefault();
    // 阻止事件冒泡，避免触发插件内部的AJAX提交逻辑
    e.stopPropagation();
    return false;
  } 
  return true;
}

// 先确认目标按钮存在，避免索引错误导致JS报错
var targetButton = document.getElementsByClassName('fc-step__substep-save')[3];
if (targetButton) {
  targetButton.addEventListener('click', function(e) {
    // 将事件对象传递给验证函数
    validarForm(e);
  });
}

关键修改说明 #

• 传递事件对象：在点击回调中把e（事件实例）传入验证函数，才能调用preventDefault()和stopPropagation()两个核心拦截方法。
• 阻止事件冒泡：Fluid Checkout的按钮绑定了插件内部的AJAX提交逻辑，stopPropagation()可以让你的验证逻辑优先拦截，避免插件的后续处理触发。
• 元素存在性检查：增加if (targetButton)判断，防止因DOM元素加载顺序或索引错误导致的代码失效。

备选方案（若上述方法仍无效） #

如果插件的事件绑定优先级更高，可改用事件捕获机制，在插件逻辑触发前执行验证：

document.addEventListener('click', function(e) {
  // 精准匹配目标按钮
  if (e.target.matches('.fc-step__substep-save.button[data-step-save]')) {
    var bronze = document.getElementById('section_g2e26i151r9_qtd_bronze').value;
    if (bronze != 12) {
      alert( "The total quantity must be equal to 12!" ); 
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
}, true); // 第三个参数`true`表示在事件捕获阶段触发，优先于插件的冒泡事件

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