[英]How to run reCaptcha ONLY if HTML5 validation has passed?
通常,HTML5 表单验证在submit
事件之前运行。
有了这个
<form id="myForm">
<input type="text" name="foo" required />
<button type="submit"> Submit </button>
</form>
<script>
$("#myForm").on('submit',function(){
console.log("I'm entering the submit event handler");
});
</script>
如果输入字段为空,则提交事件处理程序不会运行。 仅当 HTML5 验证(在本例中为required
属性)通过时才会触发。
我也希望在 HTML5 验证之后运行验证码; 如果稍后我警告他缺少字段,为什么我必须惹恼用户编译验证码? 首先,我应该强迫用户以正确的方式做所有事情,然后确保它是人类而不是机器人,恕我直言。
显然,reCaptcha 在它附加的表单上做了一些事情,删除了 HTML5 验证功能。
例如,使用最新的Invisible reCaptcha :
<form id="myForm">
<input type="text" name="foo" required />
<button type="submit"
class="g-recaptcha"
data-sitekey="your_site_key"
data-callback='myCallback'> Submit </button>
</form>
<script>
function myCallback(token){
$("#myForm").submit();
}
$("#myForm").on('submit',function(){
console.log("I'm entering the submit event handler");
});
</script>
表单将与空字段一起提交,而不通知用户其义务。
关于它为什么会这样的任何线索? 有没有办法可以指示 reCaptcha 在控制之前让 HTML5 表单验证运行?
而不是直接将 reCAPTCHA 属性附加到按钮,您必须将它们添加到 div 然后使用grecaptcha.execute();
在表单提交上。
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form id="myForm">
Name: (required) <input id="field" name="field" required>
<div id='recaptcha' class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onCompleted"
data-size="invisible"></div>
<button id='submit'>submit</button>
</form>
<script>
$('#myForm').submit(function(event) {
console.log('validation completed.');
event.preventDefault(); //prevent form submit before captcha is completed
grecaptcha.execute();
});
onCompleted = function() {
console.log('captcha completed.');
}
</script>
当您将 reCAPTCHA 属性添加到按钮时,Google 只需向按钮添加一个点击侦听器,并在点击按钮时执行 reCAPTCHA。 没有添加提交侦听器。 HTML5 验证仅通过单击提交按钮触发并在提交事件之前运行。 这就是为什么我们必须确保 reCAPTCHA在提交事件之后运行。 显然,reCAPTCHA 订阅的点击事件在内部 HTML5 验证被触发之前被处理。 当您使用submit()
提交表单时,也不会触发验证。 这就是该函数的定义方式。 因为您在回调中调用该函数,所以不会触发验证。 但是,即使您没有在回调中调用submit()
函数,似乎 reCAPTCHA 会停止事件的默认行为,从而完全停止验证。
reCAPTCHA 完成后提交表单
如果您想在 reCAPTCHA 完成后提交表单,您可以检查grecaptcha.getResponse()
的结果。
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form id="myForm">
Name: (required) <input id="field" name="field" required>
<div id='recaptcha' class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onCompleted"
data-size="invisible"></div>
<input type="submit" value="submit" />
</form>
<script>
$('#myForm').submit(function(event) {
console.log('form submitted.');
if (!grecaptcha.getResponse()) {
console.log('captcha not yet completed.');
event.preventDefault(); //prevent form submit
grecaptcha.execute();
} else {
console.log('form really submitted.');
}
});
onCompleted = function() {
console.log('captcha completed.');
$('#myForm').submit();
alert('wait to check for "captcha completed" in the console.');
}
</script>
maechler 的回答非常好,但是,如果不想使用 jQuery,则可以使用 iife 添加事件侦听器
(function() {
document.getElementById("my-form").addEventListener("submit", function(event) {
console.log('form submitted.');
if (!grecaptcha.getResponse()) {
console.log('captcha not yet completed.');
event.preventDefault(); //prevent form submit
grecaptcha.execute();
} else {
console.log('form really submitted.');
}
});
})();
我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.