javascript - Google reCAPTCHA 重置由函数调用呈现的多个验证码

Question

我有很多动态呈现的 reCAPTCHA，有时有 2 个，有时有 50 个，具体取决于页面。 我已经用这个完成了渲染:

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

并将其放置在我想要显示验证码的位置:

<div class="g-recaptcha" data-sitekey="myKey"></div>

我有一个 ajax 调用，它将表单数据提交到 process.php，如果表单数据未经验证，则会返回自定义错误

$.ajax({
    type        : 'POST', 
    url         : 'process.php', 
    data        : $(this).serialize(), 
    dataType    : 'json'
})
    .done(function(data) { 
        if ( ! data.success) {    ...

它按预期工作，但现在我想在用户忘记解决验证码时向用户显示消息作为验证的一部分。

与

var response = grecaptcha.getResponse();
if(response.length == 0){
    $('.result').append('Captcha incorrect, please click I am not robot');
}

要重置验证码，请添加以下内容

if ( ! data.success) {
      grecaptcha.reset();

它的作用是:如果用户没有填写所有有效的表单，则重置验证码。

这一切仅在第一次出现 reCAPTCHA 时有效。 我需要它以某种方式告诉它仅重置当前正在使用的验证码。

我最好的猜测是尝试使用

var form = $(this); //get current form
 grecaptcha.reset(form);

它不起作用，因为我需要小部件 ID，而不是表单。 你能帮我吗？

Answer 1

所有功劳归于https://stackoverflow.com/a/41860070/7327467

重置完成

var form = $(this); //store current form

var response = grecaptcha.getResponse(jQuery(form).find('#data-widget-id').attr('data-widget-id'));
if(response.length == 0){ //append error to result div
     form.find('.result').append('<div class="alert alert-danger">' + "Captcha incorrect" + '</div>');    }

为了重置 recaptcha，我添加了这个而不是之前的“grecaptcha.reset();”

grecaptcha.reset(jQuery(form).find('#data-widget-id').attr('data-widget-id'));

希望这有帮助。