How to reset recaptcha after user validates and it expires?

Question

Ok so the code I'm trying to figure out so far is this:

function recaptchaCallback() {
    $('#submitBtn').removeClass('btn-hide');
    $('#submitBtn').addClass('btn-show');
if (grecaptcha.getResponse() == ''){
    $('#submitBtn').addClass('btn-hide');
    $('#submitBtn').removeClass('btn-show');
    grecaptcha.reset();
}
}

What I'd like to do is something like this: if recaptcha = expired then do this {}

if (grecaptcha.getResponse() == ''){

I think is close to what I need, but how do we determine if the recaptcha has expired after the user validated they were human. The recaptcha expires after 60 seconds if a user validates and then doesn't press the submit button. At which point it needs to be revalidated, so it would make sense to disable the submit button when this happens too. Which is what I'm trying to accomplish.

What happens and it woks is when it's validated a class is added to show the button. The button is otherwise hidden. What I need is to then check for if the recatpcha expires and if it does, reverse the validation, reset the recaptcha and then change the class back so the button is then hidden again until the user re validates. — JCBrown, Apr 15 '17 at 03:20
Have you tried using JS' `setInterval` to check for a response periodically? https://www.w3schools.com/jsref/met_win_setinterval.asp — , Apr 15 '17 at 03:33
Something like `setInterval(function(){if (grecaptcha.getResponse() == ''){ $('#submitBtn').addClass('btn-hide'); $('#submitBtn').removeClass('btn-show'); grecaptcha.reset(); }}, 500);` — , Apr 15 '17 at 03:34
so just set an interval so at time of expire it resets the code? — JCBrown, Apr 15 '17 at 03:34
500 as in milliseconds. If everything works the way I think it will, it will check every half a second to see if the ReCAPTCHA has expired and then hides it when it has. — , Apr 15 '17 at 03:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141755/discussion-between-jcbrown-and-ty-q). — JCBrown, Apr 15 '17 at 03:37

score 1 · Answer 1 · answered Apr 15 '17 at 03:59

setInterval can wait 60 seconds before executing the code.

function recaptchaCallback() { 
   $('#submitBtn').removeClass('btn-hide'); 
   $('#submitBtn').addClass('btn-show'); 

   setInterval(function () { 
      $('#submitBtn').addClass('btn-hide'); 
      $('#submitBtn').removeClass('btn-show'); 
      grecaptcha.reset(); 
      clearInterval(this); 
}, 60000); 
}

score 0 · Accepted Answer · answered Apr 15 '17 at 04:23

Taking Ty Q.'s solution I noticed it worked, but was continually firing, so it was only working the first time. Once the setInterval was fired even with the clearInterval it kept firing every 60 seconds. I researched on this and came up with this solution.

function recaptchaCallback() {
  $('#submitBtn').removeClass('btn-hide');
  $('#submitBtn').addClass('btn-show');
  var timesRun = 0;
  var interval = setInterval(function(){
    timesRun += 1;
      if(timesRun === 1){
        $('#submitBtn').addClass('btn-hide');
        $('#submitBtn').removeClass('btn-show');
        grecaptcha.reset();
        clearInterval(interval);
    }
  }, 60000);
}

How to reset recaptcha after user validates and it expires?

2 Answers2