Javascript 如何仅在HTML5验证通过时运行reCaptcha？

通常，HTML5表单验证在

submit

事件之前运行

用这个

提交
$（“#myForm”）。在（'submit'，function（）上{
log（“我正在输入提交事件处理程序”）；
});

如果输入字段为空，则提交事件处理程序不会运行。 只有当HTML5验证（在本例中为

required

属性）已通过时，才会触发它

我希望在HTML5验证之后也能运行验证码；如果稍后我警告用户有丢失的字段，为什么我要烦扰编译验证码的用户？首先，我应该强迫用户以正确的方式做每件事，然后确保它是人类而不是机器人，IMHO

显然，reCaptcha在其附加的表单上做了一些事情，删除了HTML5验证功能

例如，使用最新版本：

提交
函数myCallback（令牌）{
$（“#我的表格”）.submit（）；
}
$（“#myForm”）。在（'submit'，function（）上{
log（“我正在输入提交事件处理程序”）；
});

表单将与空字段一起提交，而不通知用户其义务

---

有没有线索说明它为什么会这样？有什么方法可以让reCaptcha在取得控制权之前让HTML5表单验证运行吗？

不必直接将reCaptcha属性附加到按钮，您必须将它们添加到div中，然后使用

grecaptcha.execute（）表单提交


姓名：（必填）
提交
$（'#myForm'）。提交（函数（事件）{
console.log（'验证已完成'）；
event.preventDefault（）；//在验证码完成之前防止表单提交
grecaptcha.execute（）；
});
onCompleted=函数（）{
console.log（'captcha completed'）；
}

当您像以前那样向按钮添加reCAPTCHA属性时，Google只需向按钮添加一个click侦听器，并在单击按钮时执行reCAPTCHA。没有添加提交侦听器。HTML5验证仅通过单击submit按钮触发，并在submit事件之前运行。这就是为什么我们必须确保reCAPTCHA在提交事件之后运行。显然，reCAPTCHA订阅的点击事件是在触发内部HTML5验证之前处理的。使用
submit（）
提交表单时，也不会触发验证。函数就是这样定义的。因为您在回调中调用了该函数，所以不会触发验证。但是，即使您没有在回调中调用
submit（）
函数，reCAPTCHA似乎也会停止事件的默认行为，从而完全停止验证

在完成reCAPTCHA后提交表格

如果您希望在完成reCAPTCHA后获得提交的表单，可以检查
grecaptcha.getResponse（）
的结果


姓名：（必填）
$（'#myForm'）。提交（函数（事件）{
console.log（“已提交表单”）；
如果（！grecaptcha.getResponse（））{
log（'验证码尚未完成'）；
event.preventDefault（）；//防止表单提交
grecaptcha.execute（）；
}否则{
log（'表单确实已提交'）；
}
});
onCompleted=函数（）{
console.log（'captcha completed'）；
$（'#myForm'）。提交（）；
警报（'等待检查控制台中的“验证码已完成'）；
}
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.');
        }
      });
  })();

我希望这能有所帮助。
答案非常简洁！仍然不知道为什么在
onClick
处理程序上附加事件会影响
onSubmit
处理程序终止其内置的验证功能，但这是一个小问题：我的需求非常复杂（这只是难题的第一部分），它们现在已经完全正常工作了。谢谢我编辑了答案，以便对你在帖子中提出的那部分问题做出更多回应。不客气！感谢您的澄清，非常感谢！当心不要超过20次编辑（你现在11岁），否则帖子将在社区维基中转换，你将失去获得的声誉：）这是一个令人惊讶的答案，但很难找到它。完美的解决方案，你救了我一晚！