我正在尝试在Wordpress网站中以HTML形式实现Google的Invisible reCAPTCHA。
在head
首先,我有一个脚本来设置回调并将表单的提交事件绑定到验证:
jQuery(document).ready(function() {
var valid = false;
window.recaptchaOkay = function(token) {
valid = true;
jQuery('#cadastro').submit();
};
document.getElementById('cadastro').addEventListener('submit', function validate(event) {
if (valid) {
return true;
}
var cap = document
.getElementById('cadastro')
.querySelector('.g-recaptcha');
grecaptcha.execute(cap);
event.preventDefault();
return false;
});
});
然后,我加载 reCAPTCHA 脚本,完全按照文档中的指示:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
在body
这是我正在使用的形式:
<form action="https://example.com/" method="post" id="cadastro">
<div
class="g-recaptcha"
data-sitekey="6Lc0jC4UAAAAANlXbqGWNlwyW_e1kEB89zLTfMer"
data-callback="recaptchaOkay"
data-size="invisible"
id="cadastro-captcha">
</div>
<button type="submit" id="cadastro-submit">Enviar</button>
</form>
会发生什么
我填写表格,提交,然后抛出以下错误(在带有grecaptcha.execute
的行中(:
Error: Invalid ReCAPTCHA client id: [object HTMLDivElement]
还尝试将cadastro-captcha
ID作为字符串直接传递给该函数(例如 grecaptcha.execute("cadastro-captcha")
(,但发生了相同的错误(显然,ID 不同(。等效地,如果我不传递参数,则会发生相同的错误,除了它指的是undefined
。
试试这个:--
grecaptcha.reset(( 方法接受可选的 widget_id 参数,如果未指定,则默认为创建的第一个小部件。从 grecaptcha.render(( 方法返回一个widget_id,用于创建的每个小部件。因此,您需要存储此 ID,并使用它来重置该特定小部件:
var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);
如果更多信息,请阅读谷歌验证码文档:--https://developers.google.com/recaptcha/docs/display#js_api