How to run reCaptcha ONLY if HTML5 validation has passed?

Instead of attaching the reCAPTCHA attributes to the button directly you have to add them to a div and then use grecaptcha.execute(); on form submit.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form id="myForm">
    Name: (required) <input id="field" name="field" required>
    <div id='recaptcha' class="g-recaptcha"
         data-sitekey="your_site_key"
         data-callback="onCompleted"
         data-size="invisible"></div>
    <button id='submit'>submit</button>
</form>
<script>
    $('#myForm').submit(function(event) {
        console.log('validation completed.');

        event.preventDefault(); //prevent form submit before captcha is completed
        grecaptcha.execute();
    });

    onCompleted = function() {
        console.log('captcha completed.');
    }
</script>

When you add the reCAPTCHA attributes to the button as you did, Google simply adds a click listener to the button and executes the reCAPTCHA when the button is clicked. There is no submit listener added. The HTML5 validation is only triggered by a click on a submit button and runs before the submit event. That is why we must make sure that reCAPTCHA runs after the submit event. Apparently the click event, which reCAPTCHA subscribes to, is dealt with before the internal HTML5 validation would get triggered. The validation is also not triggered when you submit a form using submit(). That is just how that function got defined. Because you call the function in your callback, validation gets not triggered. However even if you did not call the submit() function in the callback it seems that reCAPTCHA stops the event from its default behaviour and thus stops validation completely.

Submit form after reCAPTCHA completion

If you want to get the form submitted after the reCAPTCHA is completed, you can check for the result of grecaptcha.getResponse().

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form id="myForm">
    Name: (required) <input id="field" name="field" required>
    <div id='recaptcha' class="g-recaptcha"
         data-sitekey="your_site_key"
         data-callback="onCompleted"
         data-size="invisible"></div>
    <input type="submit" value="submit" />
</form>
<script>
    $('#myForm').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.');
        }
    });

    onCompleted = function() {
        console.log('captcha completed.');
        $('#myForm').submit();
        alert('wait to check for "captcha completed" in the console.');
    }
</script>

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.