I am trying to add some custom validation to the Email and Phone fields on a form. After cobbling together a few scripts I found in the Forms 2.0 documentation and other discussions, I finally have the validation parts working. However, form submit is disabled if there is an error, and I can't figure out how to enable it again, therefore the form can't be submitted once all of the fields are correct. It can be submitted just fine if all the fields are filled out correctly from the start.
I tried putting else { form.submittable(true)} after the if statements, but then the form submits before the next check is done. I've also tried putting it outside of the form.onValidate(function() but that does not work either.
Obviously, I'm NOT well-versed in Javascript and I don't understand exactly how things are firing and how it's interacting with the baked in validation. I gather the custom validation is being processed after the regular validation is complete?
Thanks in advance for any help.
EDIT: Below is the updated code I am using.
https://codepen.io/Evangogh/pen/VjaRQV
<script src="//app-ab06.marketo.com/js/forms2/js/forms2.min.js"></script>
<script>
MktoForms2.whenReady(function(form) {
form.onValidate(function(builtInValid) {
if (!builtInValid) return;
form.submittable(true);
var vals = form.vals();
var invalidDomains = ["gmail.cm", "gmail.co",
"gmail.om", "yahoo.cm", "yahoo.co", "yahoo.om",
"hotmail.cm", "hotmail.co", "hotmail.om",
"outlook.cm", "outlook.co", "outlook.om",
"aol.cm", "aol.co", "aol.om"
],
emailExtendedValidationError =
'Please enter a valid email address.',
emailField = 'Email',
emailFieldSelector = '#' + emailField;
var invalidDomainRE = new RegExp('@(' + invalidDomains.join(
'|') + ')$', 'i');
if (invalidDomainRE.test(form.vals()[emailField])) {
form.showErrorMessage(emailExtendedValidationError,
form.getFormElem().find(emailFieldSelector)
);
form.submittable(false);
}
var emailRegExp =
/^[^\s@]+@([^\s@.,]+\.)+[^\s@.,]{2,}$/;
var validEmail = emailRegExp.test(vals.Email);
if (!validEmail) {
form.showErrorMessage(emailExtendedValidationError,
form.getFormElem().find(emailFieldSelector)
);
form.submittable(false);
}
var phoneRegExp =
/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/g;
var validPhone = phoneRegExp.test(vals.Phone);
phoneExtendedValidationError =
'Please enter a valid phone number.',
phoneField = 'Phone',
phoneFieldSelector = '#' + phoneField;
if ((vals.Phone.length < 10) || (vals.Phone.length >
20) || (vals.Phone == "0123456789") || (vals.Phone ==
"1234567890") || (vals.Phone == "9876543210") ||
(vals.Phone == "0987654321") || (!validPhone)) {
form.submittable(false);
var businessphone = form.getFormElem().find(
"#Phone");
form.showErrorMessage(
"Please enter a valid phone number.",
businessphone);
}
var invalidPhoneRE = /^\d*?(\d)\1{5,}\d*$/;
if (invalidPhoneRE.test(form.vals()[phoneField])) {
form.showErrorMessage(phoneExtendedValidationError,
form.getFormElem().find(phoneFieldSelector)
);
form.submittable(false);
} else {
form.submittable(form.submittable() !== false);
}
});
form.onSubmit(function(form) {
alert("Success!");
});
});
</script>
.png)