WooCommerce：选择非支票支付方式时隐藏的手机号字段仍被验证的问题

问题描述 #

需求为：用户选择cheque（支票）支付网关时，显示必填的Phone（手机号）字段；选择其他支付网关时，隐藏并禁用该字段。已通过前端代码实现显示隐藏效果，但选择非支票支付方式时，该字段虽已隐藏，却仍会触发必填验证并报错。

解决方案 #

需要同时调整前端JS逻辑和后端验证规则，才能彻底解决问题：

1. 优化前端JS代码 #

原代码仅移除了验证类，但未处理字段值和禁用状态，更新后代码如下：

// 按支付方式条件显示/隐藏结账字段
add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
    // 仅在结账页面生效
     if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
        jQuery(function($){
            var paymentMethodInputs = 'input[name="payment_method"]',
                checkedPaymentMethod = paymentMethodInputs + ':checked',
                phoneFieldContainer = '#billing_phone_field',
                phoneField = '#billing_phone'; // 手机号输入框本身的选择器

            // 控制字段显示/隐藏的函数
            function togglePhoneField( action = 'show' ){
                if( action == 'show' ){
                    $(phoneFieldContainer).show(200, function(){
                        $(this).addClass("validate-required");
                        $(phoneField).prop('disabled', false); // 启用字段
                    });
                } else {
                    $(phoneFieldContainer).hide(200, function(){
                        $(this).removeClass("validate-required");
                        $(phoneField).prop('disabled', true); // 禁用字段
                        $(phoneField).val(''); // 清空字段值，避免提交无效数据
                    });
                }
                // 清除验证状态类
                $(phoneFieldContainer).removeClass("woocommerce-validated");
                $(phoneFieldContainer).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            }

            // 页面初始化时的状态
            if( $(checkedPaymentMethod).val() !== 'cheque' ){
                togglePhoneField('hide');
            } else {
                togglePhoneField();
            }

            // 支付方式切换时的实时状态更新
            $( 'form.checkout' ).on( 'change', paymentMethodInputs, function() {
                if( $(checkedPaymentMethod).val() !== 'cheque' ){
                    togglePhoneField('hide');
                } else {
                    togglePhoneField();
                }
            });
        });
    </script>
    <?php
    endif;
}

2. 添加后端验证过滤 #

仅靠前端无法完全规避WooCommerce的后端必填验证，需要添加PHP钩子跳过非支票支付时的手机号验证：

// 过滤账单字段的必填验证规则
add_filter( 'woocommerce_checkout_fields', 'filter_billing_phone_required_based_on_payment' );
function filter_billing_phone_required_based_on_payment( $fields ) {
    // 仅在结账页面且支付方式非cheque时生效
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        // 获取当前选中的支付方式（前端提交时的支付方式）
        $chosen_payment_method = WC()->session->get('chosen_payment_method');
        
        if ( $chosen_payment_method !== 'cheque' ) {
            // 移除手机号字段的必填属性
            $fields['billing']['billing_phone']['required'] = false;
        }
    }
    return $fields;
}

// 更新会话中的支付方式（确保后端能实时获取选中的支付方式）
add_action( 'woocommerce_checkout_update_order_review', 'update_chosen_payment_method_session' );
function update_chosen_payment_method_session( $post_data ) {
    parse_str( $post_data, $output );
    if ( isset( $output['payment_method'] ) ) {
        WC()->session->set( 'chosen_payment_method', $output['payment_method'] );
    }
}

代码说明 #

• 前端部分：新增了禁用字段和清空值的逻辑，确保隐藏时字段不会提交无效数据；
• 后端部分：通过woocommerce_checkout_fields钩子动态修改手机号字段的必填属性，同时通过woocommerce_checkout_update_order_review钩子实时更新会话中的支付方式，保证后端能准确获取用户选择的支付方式。

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