ReCAPTCHA: gray "Submit" button until interaction with the backend is completed

Question

I turned on reCAPTCHA and it works fine, except when users click the "Submit" button too quickly right after checking the "I'm not a robot" checkbox. ReCAPTCHA takes some time to register a user’s action through Ajax, and if they click the "Send too fast" button, g-recaptcha-response is absent and verification is not performed.

Therefore, my question is: how do I render the submit button until the g-recaptcha-response value is available?

<form id="capform" action="/captchaverify" method="POST"> <div class="g-recaptcha" data-sitekey="..."></div> <p> <input id="capsubmit" type="submit" value="Submit"> </form> 

Answer 1

I ended up using the data-callback attribute, as described in the documentation :

 <form action="/captchaverify" method="POST"> <div class="g-recaptcha" data-sitekey="..." data-callback="capenable" data-expired-callback="capdisable"></div> <p> <input id="capsubmit" type="submit" value="Submit"> </form> 

JavaScript (based on mootools, but the general idea should be clear):

 function capenable() { $('capsubmit').set('disabled', false); } function capdisable() { $('capsubmit').set('disabled', true); } window.addEvent('domready', function(){ capdisable(); }); 

Answer 2

Here's an example that starts with the submit button that is disabled and turns it on after receiving a callback from reCaptcha. It also uses jquery validation to make sure the form is valid before submitting.

 var UserSubmitted = { $form: null, recaptcha: null, init: function () { this.$form = $("#form").submit(this.onSubmit); }, onSubmit: function (e) { if ($(this).valid()) { var response = grecaptcha.getResponse(); if (!response) { e.preventDefault(); alert("Please verify that you're a human!"); } } }, setupRecaptcha: function (key) { UserSubmitted.recaptcha = grecaptcha.render('recaptcha', { 'sitekey': key, 'callback': UserSubmitted.verifyCallback //'theme': 'light'//, //'type': 'image' }); }, verifyCallback: function (response) { if (response) { $(".visible-unverified").addClass("hidden"); $(".hidden-unverified").removeClass("hidden"); } } }; 

I call setupRecaptcha from a page with a named function that the js part includes.

 <script> var recaptchaLoader = function () { UserSubmitted.setupRecaptcha("yourkey"); }; </script> <script src="https://www.google.com/recaptcha/api.js?onload=recaptchaLoader&render=explicit" async defer></script> 

You can simplify this. I use it in a multi-user application with different keys, and UserSubmitted is actually part of a larger library. You cannot use namespaces (UserSubmitted.somefunction) as an onload parameter (as far as I know).