Getting double submissions with custom validation and Recaptcha3

Jeffery_Werner_
Level 2

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?

7 REPLIES 7
SanfordWhiteman
Level 10 - Community Moderator

Re: Getting double submissions with custom validation and Recaptcha3

Please highlight the code using the Syntax Highlighter and provide a link to your live page.

Jeffery_Werner_
Level 2

Re: Getting double submissions with custom validation and Recaptcha3

the code above is limited to just the marketo form, the validation and the recaptcha3 calls. because this causes double submits on our site we do not have the code live. I am testing with a one off test page.

SanfordWhiteman
Level 10 - Community Moderator

Re: Getting double submissions with custom validation and Recaptcha3

I have to create a page, you mean. OK, sometime this weekend. Please at least highlight the code.

Jeffery_Werner_
Level 2

Re: Getting double submissions with custom validation and Recaptcha3

sorry if im not clear this is our above code specific to this form with the validation and the recaptcha3 code. if you try to run the code not on our domain, the recaptcha3 will error out and this will then cause the form to fail to submit. both the validation and the recaptcha3 code are based on marketo sample code. 

validation code - Adding custom validation to a Marketo form before submitting it 

recaptcha3 code - https://codepen.io/figureone/pen/JQPgPE 

SanfordWhiteman
Level 10 - Community Moderator

Re: Getting double submissions with custom validation and Recaptcha3

No concerns about that error. Plenty of ways to avoid it. 

I need a page with all your code running, and since you refuse to provide one, I will put one up myself... to find the bug in your code.

Jeffery_Werner_
Level 2

Re: Getting double submissions with custom validation and Recaptcha3

Sanford Whiteman try this url  https://dev.mheducation.com/highered/test/bea-fw1.html 

Sorry we had a dev deployment on that server the test page can now be seen at: https://dev.mheducation.com/highered/test/marketo-articleparagraph.html

this has both the recaptcha3 and the validation code running and you can see two calls made to the save2 function yet the only submit is in the recaptcha js.

Will_Etling
Level 2

Re: Getting double submissions with custom validation and Recaptcha3

Did you find a solution to your issue? In the past I've used a secondary email validation function without issue, but recently it seems like the Marketo forms JS is running my onValidate() function while also jumping straight to onSuccess(). It's causing some weird behavior.