htmlvalidationrecaptcha

How can I process HTML form validation before reCAPTCHA's validation?


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 HTML form validation. I am looking for a way to make it in the expected order: form validation first, reCAPTCHA after.


Solution

  • 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>