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. :)
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 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.
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.
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, },
},
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With