Multiple ReCaptcha on the same page

Been trying to use multiple Google reCAPTCHAs on the same page with mixed success. Reason for doing this is for example a login page with a reCAPTHCA for the login form and a modal opening with a reset password form. I prefer to use the “invisible” reCAPTCHA since it gives a cleaner look. To be able to use the native validation of forms in HTML5 i need to manually execute the reCAPTCHA when the form is submitted which gave me issues with multiple reCAPTCHAs.

Problem

I have the form in need of HTML5 validation before submit, with tags like “required” and type=”email” etc. To be able to do this I can’t put the reCAPTCHA data triggers on the button because it overrides the validation. Instead i use a hidden reCAPTCHA like this one:

[html]

<div id="capt_login" class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" data-size="invisible" data-callback="Login"></div>;

[/html]

Then with jQuery i override the submit event of the form and executes the reCAPTCHA like this:

[js]
$("#frm_login").submit(function(event) {
event.preventDefault();
grecaptcha.reset();
grecaptcha.execute();
});
[/js]

That will work just fine for one reCAPTCHA or the first one on the page but not for a second or third one. The reason for this is the reset and execute functions provided by reCAPTCHA. If you don’t give it the ID of the reCAPTCHA widget it presumes first. You can, as I did, wish that reCAPTCHA was implemented in a “provide the div id” fashion but NO!

Solution

The reCAPTCHA widget id is actually just the index of the widget for the order they appear in the DOM. So I put together this simple snippet:

[js]
function GetReCaptchaID(containerID) {
var retval = -1;
$(".g-recaptcha").each(function(index) {
if(this.id == containerID)
{
retval = index;
return;
}
});

return retval;
}
[/js]

I then changed my submit event override to this:

[js]
$("#frm_login").submit(function(event) {
event.preventDefault();
var reCaptchaID = GetReCaptchaID("capt_login");
grecaptcha.reset(reCaptchaID);
grecaptcha.execute(reCaptchaID);
});
[/js]

This makes every reCAPTCHA on the page work an call their correct callbacks once completed.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: