I have got more than 4 google recaptcha on the same page. I managed to get them showing, but validating is not working.
$('#newsletter').on('submit', function(e) {
var response = grecaptcha.getResponse();
if (response.length == 0) {
e.preventDefault();
alert("Incorrect captcha code. Please try again.");
return false;
} else {
return true;
}
});
<form action="" method="post" id="newsletter">
<div id="sideRecaptcha" class="g-recaptcha"></div>
<input type="submit" value="submit" />
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit&hl=en" async defer></script>
<script>
var reCaptchaCallback = function() {
var elements = document.getElementsByClassName('g-recaptcha');
for (var i = 0; i < elements.length; i++) {
var id = elements[i].getAttribute('id');
var widgetId = grecaptcha.render(id, {
'sitekey' : 'XXXXXXXX',
theme' : 'light'
});
elements[i].setAttribute('cid', widgetId);
grecaptcha.reset(widgetId);
}
};
</script>
grecaptcha.getResponse() always return empty. Any idea?