MktoForms2 :: Field Confirmation
HTML
<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_169"></form>
<script>MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 169,
function(form)
{
// tag all outer wrapper DIVs with their inner inputs' names to make them more findable
for ( var formEl = form.getFormElem()[0], formRows = formEl.querySelectorAll('.mktoFormRow'), i = 0, imax = formRows.length, wrappedField; i < imax; i++ )
{
if ( (wrappedField = formRows[i].querySelector('INPUT,SELECT,TEXTAREA')) && wrappedField.name)
{
formRows[i].setAttribute('data-wrapper-for', wrappedField.name);
}
}
// clone the Email field wrapper
var emailWrapper = formEl.querySelector('.mktoFormRow[data-wrapper-for="Email"]');
var emailConfirmWrapper = emailWrapper.cloneNode(true);
// set some strings
var emailConfirmFieldName = 'emailConfirm',
emailConfirmFieldSelector = '#'+emailConfirmFieldName,
emailConfirmFieldLabel = 'Email Confirmation',
emailConfirmValidationError = 'Email and confirmation must match!';
// change some attributes before injecting
emailConfirmWrapper.setAttribute('data-wrapper-for', emailConfirmFieldName);
emailConfirmWrapper.querySelector('INPUT').name = emailConfirmWrapper.querySelector('INPUT').id = emailConfirmFieldName;
emailConfirmWrapper.querySelector('.mktoFormCol').className = 'mktoFormCol'; // fixes bug when cloning mandatory field
emailConfirmWrapper.querySelector('LABEL').innerHTML = emailConfirmFieldLabel;
// add to form
formEl.insertBefore(emailConfirmWrapper,emailWrapper.nextSibling);
// compare Email and emailConfirm before submitting
form.onValidate(function(valid)
{
form.showErrorMessage("Please provide a valid email address.. 1081 ", "#Email");
if ( form.vals().Email == emailConfirmWrapper.querySelector(emailConfirmFieldSelector).value )
...