Question

我正在尝试实施新的Google Invisible Recaptcha，由于某些原因我还不知道自动html表单验证和所需属性似乎与Recaptcha一起工作。我猜这是因为onSubmit（）函数回调。有人能告诉我如何解决这个问题吗？提前谢谢。

以下是我使用Google Invisible Recaptcha实现的表单。有意删除了data-sitekey。

<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>

Answer 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>

将此回调函数设置为data-callback属性

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

Answer 2

由于新的v2 grecaptcha方法，你必须以编程方式执行此操作：grecaptcha.execute（）以便recaptcha不会替换按钮的默认单击事件，这会阻止默认的HTML5表单验证。

请参阅this answer中的HTML5 form validation before reCAPTCHA's。

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

2 个答案: