How to reload the google recaptcha widget after user submits invalid inputs

Question

I have a registration form with the new google recaptcha widget on it. When a user submits info, we check the validation with javascript and return the problems to the page (ex: "please use a valid phone number"). however, since the page doesn't reload, when the user enters correct info and goes to submit again (without having to do the recaptcha again)...the recaptcha is no longer valid and they can't submit without reloading the page.

is there a good solution to this? can I reload the widget somehow? i tried grecaptcha.render but it didn't really do anything.

EDIT:

When I try to render the widget again, it says "placeholder element must be empty"

I tried emptying the element which seemed to work ($('.g-recaptcha').empty();) and then rendering but it still threw the same error.

Answer 1

The method you are looking for is grecaptcha.reset()

However, in order for this function to work you have to render the reCaptacha explicitly like this : <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Answer 2

If you are using grecaptcha.render with jQuery, please ensure that you are actualy setting DOM element, instead of jQuery element:

This will work:

grecaptcha.render( $('.g-recaptcha')[0], { sitekey : 'your_key_here' }); 

but this wont:

grecaptcha.render( $('.g-recaptcha'), { sitekey : 'your_key_here' });