Validate multiple recaptcha (V2) on the same page

Question

I was wondering how to validate Recaptcha client side, when there are multiple on the same page. I found this https://stackoverflow.com/a/28607943/5649602, and that is OK when i have one.

But now i have one in foooter of site on every page, and one in some registration form, so there is possibility for theme to apear in the same time.

I would appreciate any sugestion. Thanks. :)

How to target specific element? How will i know that response came from verifying, say, registration form and not form in footer? — cvetan, Nov 01 '16 at 11:13
Yes, you need a different selector. This answer may also help b/c it details the code for multiple reCaptchas based on the Google reCaptcha docs: http://stackoverflow.com/questions/29612879/google-recaptcha-how-to-make-required/29613089#29613089 — colecmc, Nov 01 '16 at 16:31
I've solved it. The term that got me confused is that in docs it says html id of element, or something like that. And i kept calling id, class.. And the thing is, when you initiate recaptcha you should save the statement to variable and that is the id which you use for identifying certain recaptcha. Anyway thanks guys. :) — cvetan, Nov 02 '16 at 11:38

score 22 · Accepted Answer · answered Apr 04 '17 at 12:15

Simplest Way to validate as much g-captcha validate

First you include api.js before </head> tag as per below

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit"></script>

Add this code in your HTML

<div class="g-recaptcha-contact" data-sitekey="Your Site Key" id="RecaptchaField2"></div>
<input type="hidden" class="hiddenRecaptcha" name="ct_hiddenRecaptcha" id="ct_hiddenRecaptcha">

<div class="g-recaptcha-quote" data-sitekey="Your Site Key" id="RecaptchaField1"></div>
<input type="hidden" class="hiddenRecaptcha" name="qt_hiddenRecaptcha" id="qt_hiddenRecaptcha">

After you add this code in footer with <script> tag

var CaptchaCallback = function() {
    var widgetId1;
    var widgetId2;
    widgetId1 = grecaptcha.render('RecaptchaField1', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_quote});
    widgetId2 = grecaptcha.render('RecaptchaField2', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_contact});
};
var correctCaptcha_quote = function(response) {
    $("#qt_hiddenRecaptcha").val(response);
};
var correctCaptcha_contact = function(response) {
    $("#ct_hiddenRecaptcha").val(response);
};

And Last easy step for developer add Jquery Validation as per below

$("#form_id").validate({
    ignore: [],
    rules: {
        ct_hiddenRecaptcha: { required: true, },
        qt_hiddenRecaptcha: { required: true, },
    },
});

Using above solution: You also can use anywhere you want without callback like EX# var widgetId1; widgetId1 = grecaptcha.render('RecaptchaField1', {'sitekey' : 'Your Site Key'}); and where you want to validate it just use grecaptcha.getResponse(widgetId1 ) — mk Mughal, Dec 02 '20 at 11:56

programm011 · Answer 2 · 2023-02-17T09:14:16.023

My solution, easy way

include before </head>

 <script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'></script>

add this code your HTML

<div class="g-recaptcha"></div>
---
<div class="g-recaptcha"></div>

and add this code in footer with <script> tag

  function onloadCallback() {
            $('.g-recaptcha').each(function (index, el) {
                grecaptcha.render(el, {
                    'sitekey': 'SITE-KEY',
                    'callback': function (response) {
                        el.getElementsByTagName('textarea')[0].innerText = response;
                    },
                });
            });
        }

Validate multiple recaptcha (V2) on the same page

2 Answers2