WordPress评论表单（WooCommerce评分）同页显示错误问题咨询

前端校验修复（解决JS没拦住提交的问题） #

你之前的校验规则漏了3个必填项：1-5星评分、隐私政策勾选框、Captcha-Code，而且没加校验失败阻止表单默认提交的逻辑，才会跳默认错误页。替换你之前的代码即可：

/* 评论/评分表单同页校验 */
function comment_validation_init() {
    if (is_single() && comments_open()) : ?>
    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.validate.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#commentform').validate({
            // 补全所有必填字段规则，注意字段name要和你实际表单里的属性一致
            rules: {
                author: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                comment: {
                    required: true,
                    minlength: 20
                },
                // 星评字段，把rating替换成你实际的字段名
                rating: {
                    required: true,
                    min: 1,
                    max: 5
                },
                // 隐私政策勾选框，替换成实际字段名
                privacy_agree: {
                    required: true
                },
                // 验证码字段，替换成实际字段名
                captcha_code: {
                    required: true
                }
            },
            messages: {
                author: "请填写您的姓名",
                email: "请填写有效的邮箱地址",
                comment: "请填写留言内容，最少20字",
                rating: "请选择1-5星评分",
                privacy_agree: "请勾选同意隐私政策",
                captcha_code: "请填写验证码"
            },
            errorElement: "div",
            errorClass: "comment-error",
            errorPlacement: function(error, element) {
                element.after(error);
            },
            // 校验失败直接阻止提交
            invalidHandler: function(event, validator) {
                return false;
            }
        });
    });
    </script>
    <?php endif;
}
add_action('wp_footer', 'comment_validation_init', 999);

注意需要把规则里的rating、privacy_agree、captcha_code替换成你实际表单里对应字段的name属性值，另外jquery.validate.min.js建议放在主题目录的js文件夹下，用get_stylesheet_directory_uri输出路径避免路径错误。

服务端兜底方案（防止用户关闭JS后还是跳转错误页） #

如果要覆盖JS被禁用的场景，可以加以下代码到主题functions.php，完全不需要修改核心文件：

/* 服务端校验错误回跳原页面展示 */
add_action('pre_comment_on_post', function($post_id) {
    session_start();
    $error = '';
    // 校验所有必填字段
    if (empty($_POST['author']) || strlen($_POST['author']) < 2) {
        $error = '请填写有效的姓名';
    } elseif (empty($_POST['email']) || !is_email($_POST['email'])) {
        $error = '请填写有效的邮箱地址';
    } elseif (empty($_POST['comment']) || strlen($_POST['comment']) < 20) {
        $error = '请填写不少于20字的留言内容';
    } elseif (empty($_POST['rating']) || $_POST['rating'] <1 || $_POST['rating'] >5) {
        $error = '请选择1-5星评分';
    } elseif (empty($_POST['privacy_agree'])) {
        $error = '请勾选同意隐私政策';
    } elseif (empty($_POST['captcha_code']) || !verify_captcha($_POST['captcha_code'])) {
        $error = '验证码填写错误';
    }
    if (!empty($error)) {
        $_SESSION['comment_error'] = $error;
        wp_safe_redirect(get_permalink($post_id) . '#commentform');
        exit;
    }
});

/* 表单上方输出错误提示 */
add_action('comment_form_before', function() {
    session_start();
    if (!empty($_SESSION['comment_error'])) {
        echo '<div class="comment-error-notice" style="color: #dc3232; padding: 10px; border: 1px solid #dc3232; margin-bottom: 15px;">' . esc_html($_SESSION['comment_error']) . '</div>';
        unset($_SESSION['comment_error']);
    }
});

注意上面verify_captcha需要替换成你实际用的验证码校验函数，如果用的是第三方验证码插件，对应替换校验逻辑即可。

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