ReCaptcha v2 client side events

Question

Does ReCaptcha v2 expose any client side events? I am looking specifically to identify when the Captcha response has been returned once the box is ticked, so I can reveal the "Continue" button below.

Without this it is possible for the user to click the checkbox then quickly click the submit button before the captcha response is back.

I could possible add my own click event handler to the class recaptcha-checkbox-checkmark and poll the visiblity of the tick, I just wondered if there was a simpler way to do this?

$(".recaptcha-checkbox-checkmark").click(function() {
    //...Poll for visibility of tick
});

possible duplicate of [How can I validate google reCAPTCHA v2 using javascript/jQuery?](http://stackoverflow.com/questions/27902539/how-can-i-validate-google-recaptcha-v2-using-javascript-jquery) — Mr. Llama, Jul 28 '15 at 22:00
Not quite the same as here the question is how to validate on submit. I am trying to control the submit button visibility. — QFDev, Jul 28 '15 at 22:05

score 47 · Answer 1 · answered Dec 04 '15 at 02:36

47

Another solution is to set data-callback directly on the g-recaptcha div, like this

<script type="text/javascript">
  var imNotARobot = function() {
    console.info("Button was clicked");
  };
</script>

<div class="g-recaptcha" data-callback="imNotARobot" data-sitekey="key"></div>

answered Dec 04 '15 at 02:36

Linus Oleander

17,746
15
69
102

7

Additionally, if you're displaying a "Continue" button on validation, you might also want to hide it when your validation expires with the `data-expired-callback` attribute, since recaptcha validation does expire after a few seconds of inactivity. – M - Jun 09 '16 at 21:52
1

Finally, someone actually gave an answer that worked! Thank you! I tried so many before I got one. It's good to know you can trigger a callback right from the placeholder. – Barry Jul 20 '16 at 02:00
Thanks! Works perfectly. – Gavin Feb 20 '17 at 11:03

score 32 · Accepted Answer · answered Jul 29 '15 at 00:55

You can configure reCAPTCHA to give a callback on successful validation using the data-callback attribute on the g-recaptcha tag or via the 'callback' parameter if using explicit rendering.

See https://developers.google.com/recaptcha/docs/display#render_param

Example using explicit rendering:

var myCallback = function(val) { console.log(val); };
grecaptcha.render(
   document.getElementsById('my-recaptcha-placeholder'), 
   {
     callback: myCallback, 
     sitekey: mySiteKey
   });

ReCaptcha v2 client side events

2 Answers2

Linked