在reCAPTCHA之前的HTML5表单验证

问题描述

我整合了新的隐藏的reCAPTCHA（v2）框架，默认情况下用提交按钮的点击事件验证用户。但是，此事件在内置的HTML5表单验证之前触发。我正在寻找一种方法来按预期的顺序进行：首先是表单验证，然后是reCAPTCHA。

I integrated the new hidden reCAPTCHA (v2) framework which by default verifies the user with the click event of the submit button. But this event is triggered before the built-in HTML5 form validation. I am looking for a way to make it in the expected order: form validation first, reCAPTCHA after.

推荐答案

你必须要做的它以编程方式感谢新的v2 grecaptcha 方法： grecaptcha.execute（），这样recaptcha不会取代按钮的默认点击事件是阻止默认的HTML5表单验证。

You have to do it programmatically thanks to a new v2 grecaptcha method: grecaptcha.execute() so that recaptcha doesn't replace the button's default click event which was preventing the default HTML5 form validation.

事件路径为：

The event path is:

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>

这篇关于在reCAPTCHA之前的HTML5表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！