HTML5 form validation before reCAPTCHA's

Question

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.

Answer 1

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. Submit button click event: browser built-in form validation
2. Form submit event: call grecaptcha.execute()
3. reCAPTCHA callback: submit the form

$('#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>