CODEWITHSUNDEEP
javascriptjqueryrecaptcha
cvetan
cvetan

Reputation: 403

Validate multiple recaptcha (V2) on the same page

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. :)

Upvotes: 13

Views: 16616

Answers (2)

nizomiddinzaripov
nizomiddinzaripov

Reputation: 327

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;
                    },
                });
            });
        }

Upvotes: 3

ImBhavin95
ImBhavin95

Reputation: 1527

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, },
    },
});

Upvotes: 23

Related Questions