如何在用户提交无效输入后重新加载google recaptcha小部件

Question

我有一个注册表单,上面有新的google recaptcha小部件.当用户提交信息时,我们使用javascript检查验证并将问题返回到页面(例如:"请使用有效的电话号码").但是,由于页面没有重新加载,当用户输入正确的信息并再次提交时(无需再次进行重新记录)... recaptcha不再有效,他们无法在不重新加载页面的情况下提交.

有一个很好的解决方案吗？我可以以某种方式重新加载小部件吗？我试过grecaptcha.render,但它并没有真正做任何事情.

编辑:

当我尝试再次渲染窗口小部件时,它说"占位符元素必须为空"

我试着清空似乎有用的元素($('.g-recaptcha').empty();)然后渲染但它仍然抛出相同的错误.

Answer 1

你正在寻找的方法是 grecaptcha.reset()

但是,为了使此功能起作用,您必须显式地呈现reCaptacha,如下所示: <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Answer 2

我只能通过使用:

grecaptcha.reset();

Answer 3

如果您正在使用带有jQuery的grecaptcha.render,请确保您实际设置DOM元素,而不是jQuery元素:

这将有效:

grecaptcha.render( $('.g-recaptcha')[0], { sitekey : 'your_key_here' });

但这不会:

grecaptcha.render( $('.g-recaptcha'), { sitekey : 'your_key_here' });

Answer 4

Personnaly我重置了我的元素html内容

$('#captcha').html('');

之后我重新加载recaptcha

$.getScript("https://www.google.com/recaptcha/api.js");

加载重新收回你的内容

<div id="captcha" class="g-recaptcha" data-sitekey="yourSitePublicKey"></div>

Answer 5

这是@ tzafar回答的一些代码:

var myCaptcha = null;
function prepCaptcha() {
    if (myCaptcha === null)
        myCaptcha = grecaptcha.render(document.getElementById('my-captcha'), {
            'sitekey': myCaptchaKey,
            'theme': 'light'
        });
    else
        grecaptcha.reset(myCaptcha);
}

在我的例子中,my-captcha是div一个Bootstrap模态内部的id .我prepCaptcha()在模态shown.bs.modal事件的事件处理程序中运行.第一次,它初始化验证码.在随后的模态显示中,它会重置它.

另请注意,您可以通过打印已完成的验证码的值来快速验证您是否获得了新的验证码:

console.log(grecaptcha.getResponse(myCaptcha));

您不应该两次看到相同的值.