Question
Getting double submissions with custom validation and Recaptcha3
Hello we are using forms on our site with custom landing pages and we are using recaptcha3. On one of the forms we are we are adding some custom email validation. The problem is the form is getting submitted twice.
<html>
<head></head>
<body><form id="mktoForm_5383"></form>
<script src="https://app-sj03.marketo.com/js/forms2/js/forms2.min.js"></script>
<script>MktoForms2.loadForm("https://app-sj03.marketo.com", "128-SJW-347", 5383, function(form) {
if (("#Parent_Account_Name__c") && $("#Comments__c")) {
$("#Parent_Account_Name__c").parents(".mktoFormRow").insertBefore($("#Comments__c").parents(".mktoFormRow"));
}
$("#Email").parents(".mktoFormRow").insertAfter($("#LeadRole").parents(".mktoFormRow"));
$("#Comments__c").parents(".mktoFormRow").css("width", "98%");
$("input[type=hidden]").parents(".mktoFormRow").css("display", "none");
form.onSuccess(function(values, followUpUrl) {
_satellite.track('mkto_request_trial_submit');
$("#text").hide();
$("form[id*='mktoForm_']").replaceWith("<h3>Thank you!</h3><p>Thank you for your interest in McGraw-Hill. You will receive an email with log-in credentials for your free 30-day trial.</p><p>If you do not see the email in your inbox, please be sure to check your spam folder or email us at <a href='mailto:epgtech@mheducation.com'>epgtech@mheducation.com</a>.</p>");
return false;
});
});
(function() {
var invalidDomains = ["yahoo.com", "gmail.com", "hotmail.com", "aol.com", "comcast.net", "verizon.net", "ymail.com", "icloud.com", "msn.com", "mail.com", "outlook.com", "me.com", "rr.com", "att.net", "pearson.com", "hmhco.com", "cengage.com", "wiley.com", "achieve3000.com", "fueled.com", "amazoninspire.com", "amplify.com", "apple.com", "canvas.instructure.com", "discoveryeducation.com", "dreambox.com", "edmodo.com", "mathlearningcenter.com", "nationalgeographic.org", "scholastic.com", "tenmarks.com", "benchmarkeducation.com", "curriculumassociates.com", "schoology.com", "engageny.org"];
MktoForms2.whenReady(function(form) {
form.onValidate(function() {
var email = form.vals().Email;
var type = form.vals().LeadRole;
if (email) {
if (type == "Educator" && !validEmail(email)) {
form.submitable(false);
var emailElem = form.getFormElem().find("#Email");
form.showErrorMessage("You must enter your school e-mail address to sample teacher materials, or select your role as Individual to sample student materials.", emailElem);
} else {
form.submitable(true);
}
}
});
});
function validEmail(email) {
for (var i = 0; i < invalidDomains.length; i++) {
var domain = invalidDomains[i];
if (email.indexOf(domain) != -1) {
return false;
}
}
return true;
}
})();
/* put right inside closing body, inside script tags */
if (typeof MktoForms2 != 'undefined') {
MktoForms2.whenReady(function(mktoForm) {
var userConfig = {
apiKeys : {
recaptcha : "6LfC4rEUAAAAAAmjy3h69GoV_kkRxm3QFIrIhp-4"
},
fields : {
recaptchaFinger : "lastReCAPTCHAUserFingerprint"
},
actions : {
formSubmit : "form"
}
};
/* --- NO NEED TO TOUCH BELOW THIS LINE --- */
var formEl = mktoForm.getFormElem()[0],
submitButtonEl = formEl.querySelectorAll("button[type='submit']"),
recaptchaLib = document.createElement("script");
/* pending widget ready */
submitButtonEl.disabled = true;
/* pending verify */
mktoForm.submittable(false);
mktoForm.locked = false;
var recaptchaListeners = {
ready : function() {
submitButtonEl.disabled = false;
}
};
Object.keys(recaptchaListeners).forEach(function globalize(fnName){
window["grecaptchaListeners_" + fnName] = recaptchaListeners[fnName];
});
mktoForm.onValidate(function(native) {
if (!native) return;
grecaptcha.ready(function() {
grecaptcha.execute(userConfig.apiKeys.recaptcha, {
action: userConfig.actions.formSubmit
})
.then(function(recaptchaFinger) {
var mktoFields = {};
if (mktoForm.locked == false) {
console.log("primary recaptcha response resolved");
mktoForm.locked = true;
mktoFields[userConfig.fields.recaptchaFinger] = recaptchaFinger;
mktoForm.addHiddenFields(mktoFields);
mktoForm.submittable(true);
mktoForm.submit();
} else {
console.log("secondary recaptcha response resolved");
}
});
});
});
/* inject the reCAPTCHA library */
recaptchaLib.src = "https://www.google.com/recaptcha/api.js?render=" + userConfig.apiKeys.recaptcha + "&onload=grecaptchaListeners_ready";
document.head.appendChild(recaptchaLib);
});
}</script>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
</body>
</html>
I am seeing two save2 calles in my network tab and this causes two leads to record in marketo.
The recaptcha3 code is used globally on our site and our other forms submit without problem.
Any thoughts?