Question

我有很多动态渲染的reCAPTCHA，有时候有2个依赖于页面。我已完成渲染：

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

希望这有帮助。

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

1 个答案: