在reCAPTCHA之前的HTML5表单验证

Question

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

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>

Answer 2

这是我获得 HTML5 验证 + Invisible recaptcha 的解决方案：

HTML：

<form id="my-form">
    <!-- Your form fields ... -->
    <div class="g-recaptcha"
        data-sitekey="..."
        data-callback="submitMyForm"
        data-size="invisible">
    </div>
    <button type="submit">Submit</button>
</form>

JS：

var myForm = $('my-form');

function submitMyForm () {
    myForm.trigger('submit', [true]);
}

$(function () {
    myForm.on('submit', function (e, skipRecaptcha) {
        if(skipRecaptcha) {
            return;
        }

        e.preventDefault();
        grecaptcha.execute();
    });
  })

Answer 3

您好，这里有一个可行的解决方案。使用隐形 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>