Question

我在页面上有多个google验证码。代码：

<script>
        var qqqq =function(captcha_response){
            console.log('?')
        }
        var CaptchaCallback = function(){
            $('.g-recaptcha').each(function(index, el) {
                grecaptcha.render(el, {'sitekey' : '{{ recaptcha_key}}', 'callback': 'qqqq', 'theme': 'dark'});
            });
        };
    </script>
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>

在页面上有几个用于reCAPTCHA的块：

<div class="g-recaptcha"></div>

所有reCAPTCHA渲染效果都很好，都是黑暗主题，都在验证工作，但 callback函数无法调用。

当我尝试使用带有数据回调属性的单个reCAPTCHA时，它运行良好。

Answer 1

我遇到了同样的问题。再次检查文档后，我发现了我的问题。尝试删除函数名称周围的单引号。像这样：

<script>
    var qqqq =function(captcha_response){
        console.log('?')
    }
    var CaptchaCallback = function(){
        $('.g-recaptcha').each(function(index, el) {
            grecaptcha.render(el, {'sitekey' : '{{ recaptcha_key}}', 'callback': qqqq });
        });
    };
</script>

也许这也有助于其他人：）

Answer 2

使用回调方法实现multimple recaptcha以禁用提交按钮的步骤

1）添加参考

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2）添加将呈现验证码小部件的代码

 <script>
            var CaptchaCallback = function () {
                grecaptcha.render('RecaptchaField1', { 'sitekey': 'xxx', callback: 'recaptchaCallback1'});
                grecaptcha.render('RecaptchaField2', { 'sitekey': 'xxx', callback: 'recaptchaCallback2' });
                grecaptcha.render('RecaptchaField3', { 'sitekey': 'xxx', callback: 'recaptchaCallback3' });
            };
 </script>

3）添加方法以删除提交按钮上的禁用属性

 $('#GetHelpButton').prop('disabled', true);

 function recaptchaCallback1()
 {
      $('#GetHelpButton').prop('disabled', false);

 }

4）在窗体

中添加窗口小部件

<form id="formContact" method="post" class="login-form margin-clear" action="Landing/SendContactForm">
<div class="form-group has-feedback">
 <label class="control-label">Correo electronico</label>
 <input name="EmailContact" value="" id="EmailContact" type="text" class="form-control" placeholder="">
<i class="fa fa-envelope form-control-feedback"></i>
</div>
<div id="RecaptchaField1"></div>
 <button   id="GetHelpButton" type="submit" data-sitekey="xxxx" class="btn btn-info col-md-12  g-recaptcha">Send</button>

Answer 3

尝试为每个 div 设置唯一 ID，然后使用 for 循环遍历它们。像这样：

window.onloadCallback = function() {
    var captcha = ['recaptcha1' ,'recaptcha2', 'recaptcha3']; //put your IDs here
    for(var x = 0; x < captcha.length; x++){
        if($('#'+captcha[x]).length){
            grecaptcha.render(captcha[x], {
                'sitekey' : '{{ recaptcha_key}}',
                'theme' : 'dark',
                'callback': function() {
                    console.log("Woof");
                }
            });
        }
    }
};

Google recaptcha回调无法使用多个reCAPTCHA

3 个答案: