複数のreCAPTCHAで動作しないGoogle recaptchaコールバック

Question

ページに複数のGoogleキャプチャがあります。コード：

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

すべてのreCAPTCHAのcallback関数が呼び出されません、すべての暗いテーマに、うまくレンダリングはすべての作業を確認します、しかし：

<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のためのいくつかのブロックがあります。

データコールバック属性を持つ単一の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> 

多分これは、同様に他の誰かを助け:)送信ボタン

1を無効にするためのコールバックメソッドでmultimple reCAPTCHAのを実装するための

Answer 2

手順を）

の参照を追加します。このよう

<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> 

フォーム内ウィジェットを追加