How to run reCaptcha ONLY if HTML5 validation has passed?

Question

Usually, HTML5 form validation runs before the submit event.

With this

Answer 1

maechler's answer is excellent, however, if one does not want to use jQuery, you can add the event listener with an iife

(function() {
    document.getElementById("my-form").addEventListener("submit", function(event) {
        console.log('form submitted.');
        if (!grecaptcha.getResponse()) {
            console.log('captcha not yet completed.');

            event.preventDefault(); //prevent form submit
            grecaptcha.execute();
        } else {
            console.log('form really submitted.');
        }
      });
  })();

I hope that helps.