RecaptchaV2 enable/disable submit

Question

I have a form in my web but I've been receiving some span so I add Google RecaptchaV2 and it stop the span but I would like disable the Submit button until the Recaptcha is checked and the user prove that is human.

The RecaptchaV2 run inside a Iframe, how can I read an element or a property to disable the Submit?

Inside the Iframe there is a span that change content once is verified: from:

<span id="recaptcha-accessible-status">Recaptcha requires verification</span>

to:

<span id="recaptcha-accessible-status">You are verified</span>

So reading that I think might be possible disable/enable the submit button with Jquery, tried using content() to read it but can't access to the iframe content, any ideas?

Thank you!

Possible duplicate of [How can I validate google reCAPTCHA v2 using javascript/jQuery?](https://stackoverflow.com/questions/27902539/how-can-i-validate-google-recaptcha-v2-using-javascript-jquery) — vaso123, Jun 30 '17 at 07:23

score 15 · Accepted Answer · answered Jun 30 '17 at 12:09

Here is the answer, this is just to disable/enable the submit button on check:

Made it to work with different forms in one page but not tested, any suggestions/changes are welcome.

Call:

<div class="g-recaptcha" data-sitekey="KEY-HERE" data-callback="correctCaptcha"></div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=en"></script>

The data-callback="correctCaptcha" is the master piece.

js:

$("form").each(function() {
    $(this).find(':input[type="submit"]').prop('disabled', true);
});
function correctCaptcha() {
    $("form").each(function() {
        $(this).find(':input[type="submit"]').prop('disabled', false);
    });
}

great solution. and for vanilla JS I just gave my submit button an ID and used this line in the correctCaptcha function: document.getElementById("submitBtn").disabled = false; — LaZza, Feb 01 '21 at 16:33

score 0 · Answer 2 · edited Jul 19 '21 at 21:34

0

This is what I ended up doing:

  var verifyCallback = function(response) {
    $('.contactForm :input[type="submit"]').prop('disabled', false);
  };

  var onloadCallback = function() {        
    grecaptcha.render('contactForm', {
      'sitekey' : 'SITE-KEY-HERE',
      'callback' : verifyCallback,
      'theme' : 'light'
    });
  };

edited Jul 19 '21 at 21:34

oucil

4,211
2
37
53

answered Apr 23 '21 at 03:46

MikeBeaudin87

115
1
6

RecaptchaV2 enable/disable submit

2 Answers2