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;
}
})();
if (typeof MktoForms2 != 'undefined') {
MktoForms2.whenReady(function(mktoForm) {
var userConfig = {
apiKeys : {
recaptcha : "6LfC4rEUAAAAAAmjy3h69GoV_kkRxm3QFIrIhp-4"
},
fields : {
recaptchaFinger : "lastReCAPTCHAUserFingerprint"
},
actions : {
formSubmit : "form"
}
};
var formEl = mktoForm.getFormElem()[0],
submitButtonEl = formEl.querySelectorAll("button[type='submit']"),
recaptchaLib = document.createElement("script");
submitButtonEl.disabled = true;
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");
}
});
});
});
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.
.png)