Hi Everyone,
reCAPTCHA Breaks HTML5 Form Validation
When you implement Infusionsoft’s Google invisible reCAPTCHA solution it breaks HTML5 validation for a web form. Meaning HTML5 validation no longer can happen.
What happens is the Infusionsoft Google reCAPTCHA script looks at the entire page, finds all scripts then places itself as the first script to run on the form button submission action. Basically it hijacks the form submission event trigger that by default fires off HTML5 form validation check.
Does Anyone Have a Solution?
We need the HTML5 validation to be active on the form submit button before the reCAPTCHA JavaScript is sent. Has anyone successfully done this?
StackOverFlow Example
I found some advice on StackOverflow but am struggling to actually code this to work in combination with the customized Infusionsoft invisible reCAPTCHA code. Infusionsoft is doing a callback to their own script onloadInfusionRecaptchaCallback.
Infusionsoft Custom Script
<script src="https://www.google.com/recaptcha/api.js?onload=onloadInfusionRecaptchaCallback&render=explicit" async="async" defer="defer"></script>
Loaded looks like this… (with our auto-generated site key replacing the xxx).
function onloadInfusionRecaptchaCallback() {
var e = document.querySelectorAll(".infusion-recaptcha");
[].forEach.call(e, function (e) {
grecaptcha.render(e.id, {
sitekey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
callback: function () {
for (var a = e.parentElement;
"FORM" !== a.tagName;) a = a.parentElement;
try {
a.submit()
} catch (n) {
console.error("Failed to find surrounding form.", n)
}
}
})
})
}
Infusionsoft Custom Call of Google Script
<script type="text/javascript" src="https://xc275.infusionsoft.com/resources/external/recaptcha/production/recaptcha.js?b=1.69.0.71"></script>
Loaded looks like this…
/* PLEASE DO NOT COPY AND PASTE THIS CODE. */
(function () {
if (!window['___grecaptcha_cfg']) {
window['___grecaptcha_cfg'] = {};
};
if (!window['___grecaptcha_cfg']['render']) {
window['___grecaptcha_cfg']['render'] = 'explicit';
};
if (!window['___grecaptcha_cfg']['onload']) {
window['___grecaptcha_cfg']['onload'] = 'onloadInfusionRecaptchaCallback';
};
window['__google_recaptcha_client'] = true;
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://www.gstatic.com/recaptcha/api2/v1520231465640/recaptcha__en.js';
var elem = document.querySelector('script[nonce]');
var nonce = elem && (elem['nonce'] || elem.getAttribute('nonce'));
if (nonce) {
po.setAttribute('nonce', nonce);
}
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
Thanks if anyone has come up with working code around this issue.
Alastair