WooCommerce/WordPress站点如何实现登录注册表单共用同一组字段？

Hey there! Let's break down your problem and walk through solutions step by step.

为什么会出现"invalid field is not focusable"警告？ #

那个警告来自浏览器的约束验证机制（Constraint Validation API）。你的注册表单里的register_username和register_password字段是必填项（WooCommerce默认给注册字段加了required属性），但你用visibility:hidden!important;position:fixed!important把它们隐藏了——浏览器认为这些需要验证的字段用户无法聚焦或修改，所以抛出这个警告。

如何解决这个警告（保留你的JS方案） #

如果想继续用你原来的双表单+JS同步的思路，有两个简单的修复方式：

1. 给注册表单添加novalidate属性 #

直接禁用浏览器的前端约束验证，把验证交给WooCommerce的后端逻辑（本来它就会做后端验证）：

<form id="register" novalidate>
    <!-- 隐藏的字段和提交按钮 -->
</form>

这样浏览器就不会检查隐藏字段的有效性，警告自然消失。

2. 改用"移出视口"的隐藏方式 #

不要用visibility:hidden，而是把字段移出用户视口，这样浏览器会认为字段是可聚焦的（虽然用户看不到）：

<div style="position: absolute; left: -9999px; top: -9999px;">
    <input id="register_username" name="username">
    <input id="register_password" name="password">
</div>

这种方式是无障碍设计里常用的隐藏元素方法，既不会让用户看到，也不会触发浏览器的验证警告。

无需JS的实现方案（更简洁） #

其实完全可以不用JS同步字段，利用HTML表单的特性来实现双提交按钮的逻辑——只用一个表单，两个提交按钮，通过按钮的name和value区分动作。

前端代码 #

<form id="login-register-form" method="post" action="<?php echo esc_url(wp_login_url()); ?>">
    <p>
        <label for="username">Username/Email</label>
        <input type="text" id="username" name="username" required>
    </p>
    <p>
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
    </p>
    <!-- 注册需要的邮箱字段（登录时后端会忽略） -->
    <p>
        <label for="email">Email (for registration)</label>
        <input type="email" id="email" name="email" required>
    </p>
    <!-- 两个提交按钮，用不同的value区分动作 -->
    <button type="submit" name="action" value="login">LOG IN</button>
    <button type="submit" name="action" value="register">REGISTER</button>
    <?php wp_nonce_field('login-register-action', 'login-register-nonce'); ?>
</form>

后端处理逻辑（添加到functions.php） #

在WordPress里添加钩子，根据提交的action值执行登录或注册：

add_action('init', 'handle_combined_login_register');
function handle_combined_login_register() {
    // 验证请求方法和nonce
    if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['login-register-nonce']) || !wp_verify_nonce($_POST['login-register-nonce'], 'login-register-action')) {
        return;
    }

    $username = sanitize_text_field($_POST['username']);
    $password = $_POST['password'];
    $email = sanitize_email($_POST['email']);

    // 处理登录
    if ($_POST['action'] === 'login') {
        $creds = [
            'user_login'    => $username,
            'user_password' => $password,
            'remember'      => true
        ];
        $user = wp_signon($creds, false);
        if (is_wp_error($user)) {
            wp_redirect(add_query_arg('login_error', $user->get_error_code(), wp_get_referer()));
            exit;
        }
        wp_redirect(home_url());
        exit;
    }

    // 处理注册
    if ($_POST['action'] === 'register') {
        if (empty($email)) {
            wp_redirect(add_query_arg('reg_error', 'empty_email', wp_get_referer()));
            exit;
        }
        $user_id = wp_create_user($username, $password, $email);
        if (is_wp_error($user_id)) {
            wp_redirect(add_query_arg('reg_error', $user_id->get_error_code(), wp_get_referer()));
            exit;
        }
        // 自动登录新用户
        wp_set_current_user($user_id);
        wp_set_auth_cookie($user_id);
        wp_redirect(home_url());
        exit;
    }
}

这个方案完全不需要JS，无JS环境下也能正常工作，而且没有隐藏字段的问题，浏览器不会抛出任何验证警告。

更优的WooCommerce专属方案 #

如果你用的是WooCommerce，推荐直接利用它的现有钩子来修改默认表单，这样能兼容WooCommerce的默认验证、错误提示和其他功能（比如验证码、社交媒体登录等）：

1. 修改登录表单，添加注册按钮和邮箱字段 #

// 在登录表单末尾添加注册按钮
add_action('woocommerce_login_form_end', 'add_register_button_to_login_form');
function add_register_button_to_login_form() {
    echo '<button type="submit" name="action" value="register" class="woocommerce-button button">REGISTER</button>';
}

// 给登录表单添加邮箱字段（注册需要）
add_action('woocommerce_login_form', 'add_email_field_to_login_form');
function add_email_field_to_login_form() {
    $email_value = !empty($_POST['email']) ? esc_attr($_POST['email']) : '';
    echo '<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="email">' . __('Email', 'woocommerce') . '&nbsp;<span class="required">*</span></label>
        <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="email" value="' . $email_value . '" />
    </p>';
}

2. 处理表单提交逻辑 #

add_action('woocommerce_login_form', 'handle_woocommerce_combined_action');
function handle_woocommerce_combined_action() {
    if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['action']) || $_POST['action'] !== 'register') {
        return;
    }

    $username = sanitize_text_field($_POST['username']);
    $password = $_POST['password'];
    $email = sanitize_email($_POST['email']);

    // 用WooCommerce的注册函数
    $user_id = wc_create_new_customer($email, $username, $password);
    if (is_wp_error($user_id)) {
        wc_add_notice($user_id->get_error_message(), 'error');
    } else {
        // 自动登录并重定向到我的账户页面
        wc_set_customer_auth_cookie($user_id);
        wp_redirect(wc_get_page_permalink('myaccount'));
        exit;
    }
}

这个方案的好处是完全贴合WooCommerce的生态，不需要自己从头写验证和错误处理，后续升级WooCommerce也不容易出问题。

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