如何根据AJAX JSON结果挂钩woocommerce_after_checkout_validation

问题背景 #

在WooCommerce结账表单中添加了自定义输入框，通过jQuery AJAX从URL获取JSON数据判断输入有效性（返回true为有效，false为无效）。需要实现：

• 点击「下单」按钮时，若验证为false则添加WooCommerce验证错误
• 用户修正输入后验证为true，再次点击结账时清除错误

现有代码存在的核心问题：

• 全局变量$isValid始终为false，即便输入有效时$_POST["json"]为true，导致错误一直显示
• 尝试使用WooCommerce会话存储值，但不知道如何通过会话控制验证结果

解决方案 #

核心思路：不在页面加载时静态挂钩验证钩子，而是在结账验证阶段直接从WooCommerce会话中读取最新的验证状态，动态判断是否添加错误。同时优化前端AJAX逻辑，确保验证状态正确传递到后端。

一、修正前端JS代码 #

// custom-wc-checkout.js
$(document).on("input", "#custom_input", function () {
    const inputValue = $(this).val();
    
    // 调用WordPress REST API判断输入有效性
    $.getJSON(`http://localhost/special/wp-json/wp/v2/posts/${inputValue}`, function (jsonData) {
        const isValid = jsonData.content.protected;
        
        // 将验证结果同步到后端会话
        $.ajax({
            url: "http://localhost/special/wp-admin/admin-ajax.php",
            type: "POST",
            data: {
                action: "validate_e_code",
                is_valid: isValid
            },
            dataType: "json",
            success: function (response) {
                console.log("验证状态已更新：", response.is_valid);
                // 前端实时反馈验证结果
                if (response.is_valid) {
                    $("#custom_input").removeClass("error").addClass("valid");
                } else {
                    $("#custom_input").removeClass("valid").addClass("error");
                }
            },
            error: function () {
                console.log("验证请求失败");
                $("#custom_input").removeClass("valid").addClass("error");
            }
        });
    }).fail(function() {
        // REST API请求失败时，标记为无效并同步到后端
        $.ajax({
            url: "http://localhost/special/wp-admin/admin-ajax.php",
            type: "POST",
            data: {
                action: "validate_e_code",
                is_valid: false
            },
            dataType: "json"
        });
        $("#custom_input").removeClass("valid").addClass("error");
    });
});

二、修正后端PHP代码 #

// Ajax.php

// 注册AJAX动作，支持前后台访问
add_action('wp_ajax_validate_e_code', 'validate_e_code');
add_action('wp_ajax_nopriv_validate_e_code', 'validate_e_code');

function validate_e_code() {
    // 确保WooCommerce会话初始化（前台AJAX请求需要手动触发）
    if ( ! WC()->session->has_session() ) {
        WC()->session->set_customer_session_cookie(true);
    }
    
    // 获取并格式化前端传递的验证状态
    $is_valid = isset($_POST['is_valid']) ? filter_var($_POST['is_valid'], FILTER_VALIDATE_BOOLEAN) : false;
    
    // 将验证状态存入WooCommerce会话
    WC()->session->set('custom_code_valid', $is_valid);
    
    // 返回JSON格式响应
    wp_send_json([
        'is_valid' => $is_valid
    ]);
    die();
}

// 直接挂钩结账验证钩子，动态判断是否添加错误
add_action('woocommerce_after_checkout_validation', 'validate_custom_checkout_code', 10, 2);

function validate_custom_checkout_code($fields, $errors) {
    // 从会话中读取最新的验证状态，默认值为false
    $is_valid = WC()->session->get('custom_code_valid', false);
    
    // 验证无效时添加错误
    if ( ! $is_valid ) {
        $errors->add('custom_code_error', '你的代码无效，请重新输入！');
    } else {
        // 验证有效时手动清除错误（WooCommerce会自动处理，但手动清除更稳妥）
        if ( isset($errors->errors['custom_code_error']) ) {
            unset($errors->errors['custom_code_error']);
        }
    }
}

关键说明 #

1. 会话存储的作用：WooCommerce会话会在用户会话期间保留验证状态，确保结账提交时能读取到最新的验证结果，替代了不可靠的全局变量。
2. 前端实时反馈：通过添加valid/error类，让用户实时看到验证结果，提升交互体验。
3. 异常处理：处理了REST API请求失败的情况，避免因接口问题导致验证状态丢失。

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