I have a recaptcha v2 implementation on my register form and I'm trying to update it from v2 to v3.
This is the code from my recaptcha v2 implementation that works correctly:
The html code :
<div class="form-group text-center">
<div class="g-recaptcha" data-sitekey="<%= $ENV{CAPTCHA_SITE_KEY} %>"></div>
</div>
The javascript code :
<script src='https://www.google.com/recaptcha/api.js'></script>
On my register form, I have an event listener that validates if the terms and conditions were read.
This is the javascript code for my event listener :
https://gist.github.com/AndreiTocu/20044c623d024a69e139af75035507cf
I implemented the v3 recaptcha following the documentation on reCAPTCHA v3.
This is the HTML code :
<button
class="g-recaptcha"
data-sitekey="reCAPTCHA_site_key"
data-callback="onSubmit"
data-action="submit"
>
Submit
</button>
This is the javascript code :
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
document.getElementById("register").submit();
}
</script>
The problem that I have is when submitting. My function 'onSubmit' gets called and submits the form along with the Recaptcha token, but my event listener that verifies the terms and conditions doesn't get called anymore.
Should I change the event listener into a regular function and call it when the 'onSubmit' function is called or should I use grecaptcha.execute, insert my token in a hidden input, and get rid of the 'onSubmit' function?