Infusionsoft's / Google Invisible reCAPTCHA Breaks HTML5 Validation


(Alastair Greenstreet) #1

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


(Chris Voice) #2

Hi Alastair,

I know this was a while ago but I was just encountering this same issue.

I ended up using the Infusion form without captcha and just went and got my own here: https://www.google.com/recaptcha/admin

Using the approach from that StackOverflow page, worked like a charm…

Thanks, Chris


(Alastair Greenstreet) #3

Hi Chris,

Glad it helped you and found a solution that worked for you.

I haven’t yet found a solution (figured out how to modify the StackOverflow code) to being able to use Infusionsoft’s version of Google’s invisible CAPTCHA that they are saying they will (at some time in the future) be requiring on all forms, or at least the use of one of the CAPTCHA’s.

Right now Infusionsoft lets you turn off the CAPTCHA requirement but for how long?

That’s why I was trying to figure out a solution while still allowing HTML5 validation to work. If I just use Google’s CAPTCHA directly then I’m not sure Infusionsoft will allow that in the future if they enforce the use of CAPTCHA via their interface.

Alastair


(Chris Voice) #4

Eek – thanks Alastair. Didn’t realize that.

Thanks, Chris

**Chris Voice

Engage Selling Solutions Inc**

www.EngageSelling.com

613-730-7700 x113 | Toll Free: 1-877-364-2438