Google reCAPTCHA fail for second time submit

Question

I implement the reCAPTCHA in this tutorial,

https://codeforgeek.com/2014/12/google-recaptcha-tutorial/

which work well for the first time submit. The problems I have are:

1. I send the captcha with other form data e.g. username , email etc.... so if captcha is correct but other not , the user will send it again, but the second time it return "{ "success": false }"

2. if I idle it for ~2 min , it will session expire and if I select the box it pop up alert and warning something like " can not refresh : invalid parameter", and I can not select the box again

How to fix those problem? Thanks a lot.

Answer 1

Google reCAPTCHA gives these two functions: I always use this in all my AJAX powered forms.

grecaptcha.getResponse()

grecaptcha.reset();

For both of your problems, use the second function whenever you need in your JavaScript code.

Remember this works if you have only one CAPTCHA in your page. If you have more than two CAPTCHAs use their IDs as explained in Google Docs

https://developers.google.com/recaptcha/docs/display#js_api

Answer 2

Those who have the same problem and meet this topic during research; If you experience problem when you render the captcha automatically, try to render it explicitly. In order to do this, add following code inside body tag.

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=tr" async defer></script>

2.                         var recaptchaCallback = function () {
                              //  alert("grecaptcha is ready!");
                               grecaptcha.render("YOUR HTML DIV ID", {
                            'sitekey': 'YOUR SITE KEY', 
                               });
                           };
   

3. I'm using AJAX to check registration form and get response. So I have added reset function to my AJAX response.

   $('#frmRegistration').submit(function () { $.ajax({ url: "_ajax/_ajaxRegistration.php", type: "POST", data: $('#frmRegistration').serialize(), success: function (reply) { $('#resultRegistration').html(reply); grecaptcha.reset(); } }); });

Reference Google reCaptcha explicit render.