求助：修改WordPress LearnDash注册页代码，添加验证码验证输入框

需求说明 #

需要在WordPress LearnDash的注册页面添加一个验证码输入字段，要求用户输入与指定格式（示例：1234-4321-3456-1264）完全匹配的验证码，输入不匹配时显示错误提示，同时禁用提交按钮；输入正确后启用按钮并隐藏错误提示。

修改后的实现代码 #

替换你之前的复选框验证代码，使用以下代码即可实现需求：

add_action('learndash_registration_form', 'dbc_ld_registration_captcha_field');
function dbc_ld_registration_captcha_field() { 
    // 自定义正确的验证码，可根据需要修改
    $correct_captcha = '1234-4321-3456-1264';
?>
<script>
jQuery(function() {
    // 初始状态禁用提交按钮
    $("#learndash_registerform #wp-submit").attr('disabled', true);
    // 从PHP获取正确的验证码
    const correctCaptcha = "<?php echo $correct_captcha; ?>";
    
    // 监听验证码输入框的输入事件
    $("#ld_registration_captcha").on('input', function(){
        const userInput = $(this).val().trim();
        const submitBtn = $("#learndash_registerform #wp-submit");
        const errorMsg = $("#captcha-error-message");
        
        if(userInput === correctCaptcha){
            // 输入正确：启用按钮，隐藏错误提示
            submitBtn.attr('disabled', false);
            errorMsg.hide();
        } else {
            // 输入错误：禁用按钮，显示错误提示
            submitBtn.attr('disabled', true);
            errorMsg.show();
        }
    });
}); 
</script>
<style>
#learndash_registerform #wp-submit:disabled {
    opacity: 0.7; 
    cursor: not-allowed; 
}
#captcha-error-message {
    color: #dc3232;
    margin-top: 5px;
    display: none;
}
</style>
<p class="learndash-registration-field learndash-registration-field-captcha">
    <label for="ld_registration_captcha">请输入验证码（格式：1234-4321-3456-1264）<span class="learndash-required-field">*</span></label>
    <input type="text" id="ld_registration_captcha" style="width: 100%; max-width: 300px;" placeholder="例如：1234-4321-3456-1264">
    <div id="captcha-error-message">验证码输入错误，请重新输入</div>
</p>
<?php
}

关键修改点 #

• 替换了原复选框的HTML结构，改为验证码输入框和错误提示元素
• JS逻辑从监听复选框点击改为监听输入框的实时输入，对比用户输入与预设验证码
• 新增错误提示样式，默认隐藏，输入错误时自动显示
• 可通过修改$correct_captcha变量快速更换正确的验证码

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