Google reCaptcha 재설정이 작동하지 않습니다.

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

양식은 제출된 양식의 인스턴스입니다.

폼이 올바르게 채워지면 모든 것이 잘 작동합니다.하지만 리캡차는 리셋되거나 새로고침되지 않습니다.이거 먹어봐grecaptcha.reset()결과는 없습니다.

감 잡히는 게 없어요?

그grecaptcha.reset()메서드는 옵션을 받아들입니다.widget_id이 파라미터는 지정되지 않은 경우 처음 작성된 위젯으로 기본 설정됩니다.awidget_id에서 반환됩니다.grecaptcha.render()작성되는 각 위젯에 대한 메서드.따라서 이 ID를 저장하고 이를 사용하여 특정 위젯을 재설정해야 합니다.

var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);

여기 보세요.

잘못된 ID를 전달하고 있습니다.

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

셀렉터는 20개의 reCaptcha 위젯을 모두 캡처하지만 단일 DOM ID(첫 번째 reCaptcha)만 반환합니다.그래서 당신의 코드는 실제로 첫 번째 탈환차를 리셋하는 것입니다.

동적 위젯을 작성하기 위해 코드를 편집했습니다.

<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는 Loop에 대해 아래에서 생성된 것과 동일합니다.

두 개의 구글 캡차가 같은 페이지에 있고, 두 개의 다른 양식으로 되어 있습니다.

<form id="form1">    
<input type="text" name="form1-input">
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div>
</form>

그리고.

<form id="form2">    
<input type="text" name="form2-input">
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div>
</form>

다음을 통해 첫 번째 캡처를 재설정할 수 있습니다.

 grecaptcha.reset(); or grecaptcha.reset(0);

그리고 색인별 두 번째 캡차 (1)

grecaptcha.reset(1);

페이지에 여러 개의 리캡처가 있고 일부는 숨겨져 있는 문제가 있었습니다.이 경우 모든 것을 루프하여 다음과 같이 리셋해야 했습니다.

                var count = 0;
                $(".g-recaptcha").each(function () {
                    grecaptcha.reset(count);
                    count++;
                });

언급URL : https://stackoverflow.com/questions/30039035/google-recaptcha-reset-doesnt-work