web-dev-qa-db-ja.com

Google reCaptchaのリセットが機能しない

AJAXを介してフォームを送信し、入力エラーがあるか、フォームが送信された場合、Google reCaptchaウィジェットをリセットします。同じページで複数のウィジェットを使用しているので、これらのウィジェットを明示的にレンダリングします。

私のHTMLコード：

_<div class="g-recaptcha" id="recaptcha-1"></div>
<div class="g-recaptcha" id="recaptcha-2"></div>
...
<div class="g-recaptcha" id="recaptcha-20"></div>
_

ウィジェットを読み込んでいます

_<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit&hl=en" async defer></script>
<script>
    var reCaptchaCallback = function() {
        var elements = document.getElementsByClassName('g-recaptcha');
        for (var i = 0; i < elements.length; i++) {
            var id = elements[i].getAttribute('id');
            grecaptcha.render(id, {
                'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
            });
        }
    };
</script>
_

フォームを送信した後：

_var id = $('.g-recaptcha', form).attr('id');
grecaptcha.reset(id);
_

フォームは、送信されたフォームのインスタンスです。

フォームが正しく記入されていれば、すべて正常に機能します。ただし、reCaptchaはリセットまたはリロードしません。このgrecaptcha.reset()を試しますが、結果はありません。

何か案が？

javascriptajaxreloadresetrecaptcha
25
quarky

grecaptcha.reset()メソッドは、オプションの_widget_id_パラメーターを受け入れ、指定されていない場合はデフォルトで作成された最初のウィジェットになります。 _widget_id_は、作成された各ウィジェットのgrecaptcha.render()メソッドから返されます。したがって、このIDを保存し、それを使用して特定のウィジェットをリセットする必要があります。

_var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);
_

こちらを参照 。

40
levi

間違ったIDを渡しています。

$('.g-recaptcha', form).attr('id');

セレクタは20個のreCaptchaウィジェットすべてをキャプチャしますが、単一のDOM ID（最初のreCaptcha）のみを返します。したがって、コードは実際に最初のレカプチャをリセットしています。

0
Jason

コードを編集して、動的なウィジェットを作成するだけです。

<script>
    var reCaptchaCallback = function() {
        var elements = document.getElementsByClassName('g-recaptcha');
        for (var i = 0; i < elements.length; i++) {                
            widgetId+i = grecaptcha.render('recaptcha-'+i, {
                'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
            });
        }
    };
</script>

上記のタスクを正常に完了した後、AJAX success：response

grecaptcha.reset(widgetId+id);

ここで、idは、以下のforループから生成されるものと同じです。

0
Viral Patel