reCAPTCHA 之前的 HTML5 表单验证

Question

我集成了新的隐藏 reCAPTCHA (v2) 框架，该框架默认使用提交按钮的 click 事件验证用户。但是这个事件是在内置的 HTML5 表单验证之前触发的。我正在寻找一种按预期顺序进行的方法：首先进行表单验证，然后再验证码。

原文由 Julio Guerra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

事件路径为：

1. 提交按钮点击事件：浏览器内置表单验证
2. 表单提交事件：调用 grecaptcha.execute()
3. reCAPTCHA 回调：提交表单

 $('#form-contact').submit(function (event) {
    event.preventDefault();
    grecaptcha.reset();
    grecaptcha.execute();
  });

function formSubmit(response) {
  // submit the form which now includes a g-recaptcha-response input
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="?">
  <div class="g-recaptcha"
       data-sitekey="your-key"
       data-size="invisible"
       data-callback="formSubmit">
  </div>
  <button type="submit">Submit</button>
</form>

原文由 Julio Guerra 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

嗨，这里有一个可行的解决方案。使用不可见的 Recaptcha。

 jQuery(document).ready(function() {
    var commentform = jQuery("#commentform");
    commentform.on("click", "#submit-comment", function(e) {
      if(commentform[0].checkValidity()) {
        e.preventDefault();
        grecaptcha.execute();
      }
    });
});

function submitCommentForm(data) {
    document.getElementById("commentform").submit();
}

 <form action="blaba.php" method="post" id="commentform" class="comment-form">
  <div class="form-submit">
    <div data-callback="submitCommentForm" data-sitekey="yourkey" class="g-recaptcha" data-size="invisible">
    <button id="submit-comment">Leave a comment</button>
  </div>
</form>

原文由 Maxime 发布，翻译遵循 CC BY-SA 3.0 许可协议