嘿，这个问题我刚好研究过！想要在WooCommerce账户页面实现原生内联必填字段错误，完全可以通过WordPress和WooCommerce的原生钩子来搞定，不用依赖jQuery Validator，而且完全符合规范。

下面是具体的实现步骤，代码可以放到你的主题functions.php文件或者自定义插件中：

1. 关闭账户页面顶部的默认错误通知 #

首先我们要先禁用默认的顶部错误提示，避免重复显示：

add_filter('woocommerce_show_notices', 'disable_account_page_top_notices');
function disable_account_page_top_notices($show_notices) {
    // 判断是否在账户页面且有表单提交动作
    if (is_account_page() && (isset($_POST['save-account-details']) || isset($_POST['save_address']))) {
        return false;
    }
    return $show_notices;
}

2. 捕获表单验证错误并关联到对应字段 #

接下来我们需要拦截WooCommerce的验证错误，把错误信息和对应的字段关联起来，方便后续内联显示：

处理账户编辑表单的错误 #

add_action('woocommerce_save_account_details_errors', 'capture_account_field_errors', 10, 2);
function capture_account_field_errors($errors, $user) {
    global $account_field_errors;
    $account_field_errors = array();
    
    // 遍历所有错误，提取字段和对应错误信息
    foreach ($errors->get_error_codes() as $code) {
        $error_data = $errors->get_error_data($code);
        if (isset($error_data['field'])) {
            $account_field_errors[$error_data['field']] = $errors->get_error_message($code);
        }
    }
}

处理账单/配送地址表单的错误 #

// 账单地址
add_action('woocommerce_process_billing_address_validation', 'capture_billing_field_errors', 10, 3);
function capture_billing_field_errors($errors, $user_id, $load_address) {
    global $account_field_errors;
    $account_field_errors = array();
    
    foreach ($errors->get_error_codes() as $code) {
        $error_data = $errors->get_error_data($code);
        if (isset($error_data['field'])) {
            $account_field_errors['billing_' . $error_data['field']] = $errors->get_error_message($code);
        }
    }
}

// 配送地址
add_action('woocommerce_process_shipping_address_validation', 'capture_shipping_field_errors', 10, 3);
function capture_shipping_field_errors($errors, $user_id, $load_address) {
    global $account_field_errors;
    $account_field_errors = array();
    
    foreach ($errors->get_error_codes() as $code) {
        $error_data = $errors->get_error_data($code);
        if (isset($error_data['field'])) {
            $account_field_errors['shipping_' . $error_data['field']] = $errors->get_error_message($code);
        }
    }
}

3. 将错误信息内联显示在字段旁 #

最后一步，我们修改表单字段的输出，把对应的错误信息添加到字段下方：

add_filter('woocommerce_form_field', 'add_inline_errors_to_account_fields', 10, 4);
function add_inline_errors_to_account_fields($field, $key, $args, $value) {
    global $account_field_errors;
    
    // 如果当前字段有错误，添加内联错误提示
    if (is_account_page() && isset($account_field_errors[$key])) {
        $error_html = '<span class="woocommerce-error inline-field-error" style="display:block; color:#dc3232; margin-top:4px; font-size:0.875em;">' . esc_html($account_field_errors[$key]) . '</span>';
        $field .= $error_html;
    }
    
    return $field;
}

自定义样式（可选） #

你可以在主题的CSS文件里添加自定义样式，让错误提示更美观：

.inline-field-error {
    color: #dc3232 !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

这个方案完全基于WordPress和WooCommerce的原生钩子，没有使用任何第三方脚本，完全符合WordPress开发规范，而且覆盖了账户页面的所有表单（编辑账户、账单地址、配送地址）。

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