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

How to reload the google recaptcha widget after user submits invalid inputs

提问by Matthew Berman

I have a registration form with the new google recaptcha widget on it. When a user submits info, we check the validation with javascript and return the problems to the page (ex: "please use a valid phone number"). however, since the page doesn't reload, when the user enters correct info and goes to submit again (without having to do the recaptcha again)...the recaptcha is no longer valid and they can't submit without reloading the page.

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

is there a good solution to this? can I reload the widget somehow? i tried grecaptcha.render but it didn't really do anything.

有什么好的解决办法吗？我可以以某种方式重新加载小部件吗？我试过 grecaptcha.render 但它并没有真正做任何事情。

EDIT:

编辑：

When I try to render the widget again, it says "placeholder element must be empty"

当我再次尝试渲染小部件时，它显示“占位符元素必须为空”

I tried emptying the element which seemed to work ($('.g-recaptcha').empty();) and then rendering but it still threw the same error.

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

回答by Ghislaindj

The method you are looking for is grecaptcha.reset()

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

However, in order for this function to work you have to render the reCaptacha explicitly like this : <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

但是，为了使此功能正常工作，您必须像这样显式呈现 reCaptacha： <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

回答by Waqleh

I was able to do it just by using:

我只能通过使用来做到这一点：

grecaptcha.reset();

回答by Déján K??di?

If you are using grecaptcha.render with jQuery, please ensure that you are actualy setting DOM element, instead of jQuery element:

如果您在 jQuery 中使用 grecaptcha.render，请确保您实际设置的是 DOM 元素，而不是 jQuery 元素：

This willwork:

这将起作用：

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

but this wont:

但这不会：

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

回答by Yacine

Personnaly I reset my element html content with

我个人重置了我的元素 html 内容

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

after that I reload recaptcha using

之后我使用重新加载recaptcha

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

which load recaptcha content on your

在您的上加载recaptcha内容

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

回答by Mike Spear

Here's some code to accompany @tzafar's answer:

以下是@tzafar 回答的一些代码：

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

In my case, my-captchais the id of a divinside of a Bootstrap modal. I run prepCaptcha()in the event handler for the modal's shown.bs.modalevent. The first time, it initializes the captcha. On subsequent shows of the modal, it resets it.

在我的情况下，my-captcha是divBootstrap 模态内部的 id 。我prepCaptcha()在模式shown.bs.modal事件的事件处理程序中运行。第一次，它初始化验证码。在模态的后续显示中，它会重置它。

Also, note that you can quickly verify that you're getting a new captcha by printing the completed captcha's value:

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

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

You shouldn't see the same value twice.

您不应两次看到相同的值。

回答by tzafar

your recaptcha render js event should be called only once in the script, your recaptcha code is not valid if grecaptcha.renderjs event called second time in script. You should have to check your code so it should not call the grecaptcha.renderfunction second time on validation check.

您的 recaptcha 渲染 js 事件应在脚本中仅调用一次，如果grecaptcha.render在脚本中第二次调用 js 事件，则您的 recaptcha 代码无效。你应该检查你的代码，这样它就不应该grecaptcha.render在验证检查时第二次调用该函数。

OR

或者

In console, You will see a Uncaught ReferenceError: Recaptcha is not definederror message, which indicates the problem with the reCAPTCHA script. This is caused due to a bad url in the page - http://api.recaptcha.net/js/recaptcha_ajax.js. Google has updated the reCAPTCHA and moved the location of the script to http://www.google.com/recaptcha/api/js/recaptcha_ajax.js.

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

also check this post

也检查这个帖子

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

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

and this post

和这篇文章

Uncaught ReferenceError: Recaptcha is not defined

未捕获的 ReferenceError：未定义 Recaptcha

回答by StaticVoid

Try calling the reload()function within ReCaptcha (version 1):

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

Recaptcha.reload();

How to Reload ReCaptcha using JavaScript?

如何使用 JavaScript 重新加载 ReCaptcha？

回答by Sara Khan

if you are using new recaptcha 2.0 use this: for code behind:

如果您使用的是新的 recaptcha 2.0，请使用以下代码：

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

for simple javascript

对于简单的 javascript

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

回答by Utsav Kundu

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

回答by Elon Zito

If you're using WordPress, make sure you don't have another reCaptcha plugin installed...that was the issue for me.

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