WooCommerce自定义字段变更时无需填完必填项触发结账更新

问题原因 #

默认调用jQuery( 'body' ).trigger( 'update_checkout' )时，WooCommerce绑定在该事件上的回调会先执行全表单必填项校验，只要存在未填的必填字段，就会直接终止后续更新流程，不会向后端发送费用计算请求，总计区块不会刷新。

实现方案 #

以下两种方案都不会修改原有订单提交环节的必填校验逻辑，用户最终提交订单时依然需要补全所有必填字段，仅在自定义字段变更触发总计刷新时跳过前置检查：

• 方案1：临时解绑校验回调，更新后自动恢复
  触发更新前暂时移除带校验逻辑的事件回调，等更新请求发出后立刻重新绑定，不影响后续正常交互：

  // 将选择器替换为你自己添加的自定义结账字段
  jQuery( '.your-custom-field' ).on( 'input change', function () {
    // 临时移除带校验的更新回调
    jQuery( document.body ).off( 'update_checkout', wc_checkout_form.update_checkout );
    // 触发结账数据更新
    jQuery( document.body ).trigger( 'update_checkout' );
    // 等待请求发出后重新绑定原有回调
    setTimeout( function () {
      jQuery( document.body ).on( 'update_checkout', wc_checkout_form.update_checkout );
    }, 100 );
  } );
  

• 方案2：直接调用底层更新方法，绕过事件层校验
  不想做解绑/重绑操作的话，可以直接调用WooCommerce结账实例内置的更新方法，直接发起费用计算请求，跳过事件层绑定的前置校验：

  // 将选择器替换为你自己添加的自定义结账字段
  jQuery( '.your-custom-field' ).on( 'input change', function () {
    wc_checkout_form.trigger_update_checkout();
  } );
  

  该写法兼容WooCommerce 3.0及以上版本，代码更简洁。

注意事项 #

• 不要为了实现实时刷新直接移除字段的required属性，会导致订单提交环节缺失必填校验，产生信息不全的异常订单。
• 如果自定义字段值会影响附加费、运费、折扣等动态费用计算，建议同时绑定input和change事件，用户输入内容时即可实时更新总计，无需等待输入框失焦。

内容的提问来源于stack exchange，提问作者Tom F.