How to run reCaptcha ONLY if HTML5 validation passes?

Question

Typically, HTML5 form validation is done before the event submit.

With the help of this

<form id="myForm">
    <input  type="text" name="foo" required />

    <button type="submit"> Submit </button>

</form>

<script>
    $("#myForm").on('submit',function(){
        console.log("I'm entering the submit event handler");
    });
</script>

if the input field is empty, the send event handler does not start. It will be launched only if HTML5 verification has passed (attribute requiredin this case).

I would expect captcha to run after HTML5 validation; why should I annoy the user compiling the captcha if later I would warn him about the missing fields? First I have to get the user to do everything right, and then provide him with a person, not a bot, IMHO.

ReCaptcha seems to be doing something in the form it joins, removing the HTML5 validation function.

, Invisible reCaptcha:

<form id="myForm">
    <input  type="text" name="foo" required />

    <button type="submit"
           class="g-recaptcha" 
    data-sitekey="your_site_key" 
   data-callback='myCallback'> Submit </button>

</form>

<script>
    function myCallback(token){
        $("#myForm").submit();
    }

    $("#myForm").on('submit',function(){
        console.log("I'm entering the submit event handler");
    });
</script>

​​ , .

- , ? , reCaptcha HTML5 ?

Answer 1

, reCAPTCHA , div, grecaptcha.execute(); 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>

reCAPTCHA , , Google reCAPTCHA . . HTML5 . , reCAPTCHA . -, click, reCAPTCHA, , HTML5. submit(). . , . , submit() , , reCAPTCHA , , .

reCAPTCHA

, reCAPTCHA, 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>