How to prevent Google reCAPTCHA (v3) from enabling the button it's attached to

Question

I'm adding reCAPTCHA v3 to the user registration form on my website. Previously, the submit button on the form was disabled by default and gets enabled after some validation (ToS acceptance, etc.). However, when I add reCAPTCHA to the submit button the reCAPTCHA code is enabling the button, which I don't want.

I set a DOM breakpoint on the button and verified that it is indeed the reCAPTCHA code enabling the button. I also have a codepen demonstrating the issue here showing one initially-disabled button with reCAPTCHA and another initially-disabled button without reCAPTCHA:

    <button disabled class="g-recaptcha" data-sitekey="..." data-callback="onSubmit">Button w/ reCAPTCHA</button>
    <button disabled>Button w/o reCAPTCHA</button>

The one with reCAPTCHA gets enabled by the reCAPTCHA code and the other one stays disabled.

Are there any configuration options for reCAPTCHA v3 to avoid this automatic enabling of the buttons it is attached to?

Jubbulpore

Present the entire reCAPTCHA after you do your validation? – Dorsal

@RobertHarvey I'm using reCAPTCHA v3 which doesn't actually present a UI. It's completely non-interactive. – Jubbulpore

Answer 1

I never found an option to disable the disablement so I ended up dropping the attribute-based reCAPTCHA activation in favor of programmatically invoking the challenge.

Jubbulpore

Answer 2

Try this:

function onSubmit(token) {
    setTimeout(function () {
        document.getElementById('your-button-id').disabled = true;
    }, 0);
    document.getElementById('your-form-id').submit();
}

Mandalay