使用 Google Invisible Captcha 时，自动 html 表单验证和必需属性不起作用。为什么？答案

【问题标题】：When using Google Invisible Captcha automatic html form validation and required attribute does not work. Why?使用 Google Invisible Captcha 时，自动 html 表单验证和必需属性不起作用。为什么？
【发布时间】：2017-09-05 00:08:17
【问题描述】：

我正在尝试实现新的 Google Invisible Recaptcha，但由于某种原因，我还不知道自动 html 表单验证和所需的属性似乎无法与 Recaptcha 一起工作。我猜这是因为 onSubmit() 函数回调。有人可以让我知道如何解决这个问题吗？提前致谢。

以下是我使用 Google Invisible Recaptcha 实现的表单。数据站点密钥已被有意删除。

<html>
<head>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script>
    function onSubmit(token) {
      document.getElementById("contactForm").submit();
    }
  </script>
</head>
<body>
<form id="contactForm" action="#" method="POST">
  <p>Leave a Message</p>
  <label for="inputName">Name</label>
  <input type="text" name="Name" id="inputName" placeholder="Name" required> <br>
  <label for="inputEmail">Email</label>
  <input type="email" name="Email" id="inputEmail" placeholder="Email Id" required> <br>
  <label for="inputMessage">Message</label>
  <input type="text" name="Message" id="inputMessage" placeholder="Message" required><br/>
  <button class="g-recaptcha" type="submit" data-sitekey="//site-key" data-badge="bottomleft" data-callback='onSubmit'>Submit</button>
  <button type="reset">Reset</button>
</form>
</body>
</html>

【问题讨论】：

您确定使用站点密钥和秘密确认吗？？
是的，我使用了正确的站点密钥和密钥。这不是我第一次使用 Google Captcha。当我尝试使用他们新的 v2 Invisible Captcha 时遇到了这个问题。
需要调用 grecaptcha.execute() 方法。试试this例子

标签： javascript html captcha recaptcha

【解决方案1】：

创建一个回调函数，将提交按钮的 onclick 属性设置为 onSubmit 函数，然后触发点击。

 <script>
 function callBack(){
  document.getElementById('submit-button').addEventListener('click',onSubmit);
  document.getElementById('submit-button').click();
 }

 function onSubmit() {
 //validation code here
  document.getElementById("contactForm").submit();
 }
</script>

将此回调函数设置为数据回调属性

<button id='submit-button' class="g-recaptcha" type="submit" data-sitekey="//site-key" data-badge="bottomleft" data-callback='callBack'>Submit</button>

【讨论】：

这不会触发 html 验证。这只会给你一个区域来注入你自己的 javascript 验证。

【解决方案2】：

借助新的 v2 grecaptcha 方法，您必须以编程方式执行此操作：grecaptcha.execute()，这样 recaptcha 就不会替换阻止默认 HTML5 表单验证的按钮默认单击事件。

从HTML5 form validation before reCAPTCHA's 看到this answer。

【讨论】：