Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 569
cvetan Avatar asked Nov 01 '16 10:11

cvetan


People also ask

Can I run reCAPTCHA v2 and v3 on the same page?

Can I run reCAPTCHA v2 and v3 on the same page? To do this, load the v3 site key as documented, and then explicitly render v2 using grecaptcha.render.

Is CAPTCHA v3 better than v2?

Is reCAPTCHA v3 better than v2? Neither of them is good at blocking bots. While reCAPTCHA v3 is less intrusive than v2 for a user, it places a significant burden on the webmaster to determine when to let users through and when to block or challenge them. There's no right answer to this.

How do I know if reCAPTCHA v2 is working?

The reCAPTCHA integration should be working if you see the reCAPTCHA field loaded on the site page. However, if you're still having spam with reCAPTCHA enabled, you can consider increasing security level of the reCAPTCHA integration on your site by going to your reCAPTCHA account.


1 Answers

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, },
    },
});
like image 144
ImBhavin95 Avatar answered Sep 19 '22 14:09

ImBhavin95