Javascript 要求用户在提交表单之前点击谷歌的新验证码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31017261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Require User to click google's new recaptcha before form submission
提问by Ryan Fung
I am using google's new recaptcha inside my form (HTML5): https://www.google.com/recaptcha
我在我的表单（HTML5）中使用了谷歌的新recaptcha：https: //www.google.com/recaptcha
Is there a way to check and mark recaptcha as required before form submission? I want to validate this on client side instead of server side. That way, I don't have to go back to the form and warn user about not entering anything for the captcha.
有没有办法在提交表单之前根据需要检查和标记recaptcha？我想在客户端而不是服务器端验证这一点。这样，我就不必返回表单并警告用户不要为验证码输入任何内容。
Any javascript that I can use to check whether user enter anything in recaptcha?
我可以使用任何 javascript 来检查用户是否在 recaptcha 中输入了任何内容？
回答by jagad89
You can check the textarea field with id g-recaptcha-response. You can do as following:
您可以使用 id 检查 textarea 字段g-recaptcha-response。您可以执行以下操作：
$("form").submit(function(event) {
var recaptcha = $("#g-recaptcha-response").val();
if (recaptcha === "") {
event.preventDefault();
alert("Please check the recaptcha");
}
});
Hope this helps you.
希望这对你有帮助。
回答by rylanb
A vanilla JavaScript implementation using parts of both Ankesh's and Lammert's solution:
使用 Ankesh 和 Lammert 解决方案的一部分的普通 JavaScript 实现：
var form = document.getElementById('ctct-custom-form');
form.addEventListener("submit", function(event){
if (grecaptcha.getResponse() === '') {
event.preventDefault();
alert('Please check the recaptcha');
}
}
, false);
Credit to for form submit listener code: How can I listen to the form submit event in javascript?
归功于表单提交侦听器代码：如何在 javascript 中侦听表单提交事件？
回答by Ankesh Mistry
grecaptcha.getResponse()-
Returns the response for the Recaptcha. You can check this in condition such as
grecaptcha.getResponse()- 返回对 Recaptcha 的响应。您可以在条件中检查此内容，例如
grecaptcha.getResponse(opt_widget_id) === ""
grecaptcha.getResponse(opt_widget_id) === ""
Optional widget ID, defaults to the first widget created if unspecified.
可选的小部件 ID，如果未指定，则默认为创建的第一个小部件。
回答by Daniel Turu?
I tried to improve rylanb's answer. The code below find all the forms in the page that have g-captcha activated and prevent from submission.
Note: It assumes that your div.g-recaptchais the child of form
我试图改进 rylanb 的回答。下面的代码查找页面中所有已激活 g-captcha 并阻止提交的表单。注意：它假设您div.g-recaptcha是form
const forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(form=> {
const formParentElement = form.parentElement;
formParentElement.addEventListener("submit", e => {
if (grecaptcha.getResponse() === '') {
e.preventDefault();
alert('Please check the recaptcha');
}
}, false)
});
