在reCAPTCHA之前的HTML5表单验证

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

解决方法

您必须以编程方式执行此操作,这要归功于新的v2 grecaptcha方法：grecaptcha.execute()以便recaptcha不会替换按钮的默认单击事件,这会阻止默认的HTML5表单验证.

事件路径是：

>提交按钮单击事件：浏览器内置表单验证
>表单提交事件：调用grecaptcha.execute()
> 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>