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

我能够通过使用：

来做到这一点

public void moveDirection(float xa, float ya, float xb, float yb) {
    if(!move) {
        return;
    }
    else {
        float m, b;
        float dx = xb-xa;

        m = (yb - ya) / (xb - xa);

        b = ya - (m * xa);

        if(dx > 0) {
            this.x += speedX;
        }
        else {
            this.x += -speedX;
        }

        this.y = (m * this.x + b);
    }
}

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是Bootstrap模式中div的id。我在模态的prepCaptcha()事件的事件处理程序中运行shown.bs.modal。第一次，它初始化验证码。在随后的模态显示中，它会重置它。

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

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

你不应该两次看到相同的值。

Answer 6

你的recaptcha渲染js事件应该只在脚本中调用一次，如果在脚本中第二次调用grecaptcha.render js事件，你的重访代码无效。您必须检查代码，以便它不应在验证检查时第二次调用grecaptcha.render函数。

OR

在控制台中，您将看到一条Uncaught ReferenceError: Recaptcha is not defined错误消息，指出reCAPTCHA脚本存在问题。这是由于网页中的网址错误导致的 - http://api.recaptcha.net/js/recaptcha_ajax.js。 Google已更新reCAPTCHA并将脚本的位置移至http://www.google.com/recaptcha/api/js/recaptcha_ajax.js。

也查看这篇文章

http://www.instructables.com/id/Fix-reCAPTCHA-errors-on-Instructables/

和这篇文章

Uncaught ReferenceError: Recaptcha is not defined

Answer 7

尝试在ReCaptcha（版本1）中调用reload()函数：

Recaptcha.reload();

How to Reload ReCaptcha using JavaScript?

Answer 8

如果你使用新的recaptcha 2.0，请使用：代码背后：

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

简单的javascript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>

Answer 9

我对Symfony2的excelwebzone/recaptcha-bundle也有同样的问题。基本上是说 recaptcha过去加载到你的DOM和占位符应该是空的。

这些捆绑包没有显式回调的设置，所以在加载recaptcha 之前，你必须确保占位符甚至整个表单都是空的。

然后我被困在DOM中因为我用AJAX加载它。在第二次通话时它就在那里。

您只需使用$('#your-div-with-form').html('')

即可

Answer 10

<script>
function cform(token) {
$.ajax({
type: 'POST',
url: 'contact_chk.php',
data: $('#cform').serialize(), 
success: function(response) {
grecaptcha.reset();
$("#con_msg").html(response);
document.getElementById("name").value='';
document.getElementById("subject").value='';
document.getElementById("email").value='';
document.getElementById("phone").value='';
document.getElementById("message").value='';
},
error: function(response) {
grecaptcha.reset();
$("#con_msg").html('Try Again...');
}
});
}
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>

Answer 11

如果您正在使用WordPress，请确保您没有安装其他reCaptcha插件...这对我来说是个问题。

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

11 个答案: