WooCommerce货到付款弹窗前校验必填字段问题

原代码中使用jQuery的.valid()方法无法生效，是因为WooCommerce的结账表单校验依赖自身的require-validate类标记必填字段。下面是修改后的完整代码，实现COD弹窗弹出前先完成表单必填项校验：

// Popup Confirmation
function add_cod_confirmation_popup() {
    if ( ! is_checkout() ) {
        return;
    }

    $selected_payment_method_id = WC()->session->get('chosen_payment_method');
    // 仅当选择COD时加载弹窗相关脚本样式，可取消注释启用
    // if ($selected_payment_method_id === "cod" ){
        add_action( 'wp_footer', 'cod_confirmation_popup_script' );
        add_action( 'wp_footer', 'cod_confirmation_popup_style' );
    // }

}
add_action( 'wp', 'add_cod_confirmation_popup' );

function cod_confirmation_popup_script() {
  ?>
  <script>
    jQuery(document).ready(function($) {
      $('form.checkout').on('submit', function(e) {
            var $form = $(this);
            var confirmInput = $('input[name="payment_method"]:checked').val();
            var isFormValid = true;

            // 校验所有带require-validate类的必填字段
            $form.find('.require-validate').each(function() {
                var $field = $(this);
                // 触发WooCommerce原生校验
                $field.blur();
                
                // 检查字段是否有错误提示或为空
                if ($field.hasClass('woocommerce-invalid') || ($field.val() === '' && $field.attr('required') !== undefined)) {
                    isFormValid = false;
                    // 滚动到第一个错误字段
                    $('html, body').animate({
                        scrollTop: $field.offset().top - 100
                    }, 500);
                    return false; // 跳出循环
                }
            });

            // 仅当选择COD且表单校验通过时，弹出确认弹窗
            if (confirmInput === "cod" && isFormValid) {
                if ($('.confirmation-modal').length === 0) {
                    e.preventDefault();

                    var confirmationModal = '<div class="confirmation-modal">' +
                        '<div class="modal-content">' +
                        '<p>确认使用货到付款（COD）下单吗？</p>' +
                        '<button class="confirm-button">确认</button>' +
                        '<button class="cancel-button">取消</button>' +
                        '</div>' +
                        '</div>';

                    $('body').append(confirmationModal);

                    $('.confirm-button').on('click', function() {
                        // 解绑原有submit事件避免循环触发，直接提交表单
                        $form.unbind('submit').submit();
                        $('.confirmation-modal').remove();
                    });

                    $('.cancel-button').on('click', function() {
                        $('.confirmation-modal').remove();
                    });
                }
            }
      });
  });      
  </script>
  <?php
}

function cod_confirmation_popup_style() {
  ?>
  <style>
      .confirmation-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 9999;
      }

      .modal-content {
          background-color: #fff;
          padding: 20px;
          border-radius: 4px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          text-align: center;
      }

      .confirm-button, .cancel-button {
          margin: 0 10px;
          padding: 8px 16px;
          cursor: pointer;
      }

      .confirm-button {
          background-color: #2271b1;
          color: #fff;
          border: none;
          border-radius: 4px;
      }

      .cancel-button {
          background-color: #f0f0f1;
          border: 1px solid #c3c4c7;
          border-radius: 4px;
      }
  </style>
  <?php
}

关键修改说明： #

• 移除无效的.valid()调用，替换为遍历require-validate类字段的自定义校验逻辑
• 触发blur()事件唤起WooCommerce原生校验，确保错误提示正常显示
• 校验不通过时自动滚动到第一个错误字段，优化用户体验
• 修复确认按钮提交逻辑，解绑原有submit事件避免循环触发
• 优化弹窗按钮样式，提升视觉体验

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