Adding Custom Validation to a Marketo Form before Submitting It
Description description
Please ensure that you have access to an experienced JavaScript developer.
Marketo Technical Support is not set up to assist with troubleshooting JavaScript.
Summary
Say you want to validate a custom field before someone submits a Marketo form on a Marketo landing page, then let Marketo do it’s standard validation.
You can do that by overriding the formSubmit function in Javascript. You can override it with a Custom HTML element for a single page; you can also add this Javascript to your landing page template so it affects many landing pages.
First, build a Javascript function to execute your custom validation (formIsValid() in the example below). It should return a value of “true” if the fields validate. If not, return false.
Open the landing page for editing and drag a Custom HTML element onto the web page. Paste in this Javascript and add your custom validation to the formIsValid() function.
<script type="text/javascript" src="/js/public/jquery-latest.min.js" language="Javascript"></script>
<script type="text/javascript">
// set no conflict mode for jquery
var $jQ = jQuery.noConflict();
function myFormIsValid() {
var thisIsValid = true;
// Put your custom validation here.
// If anything goes wrong, set thisIsValid to false.
// for example, show an error message if the email contains "bob"
if ($jQ("#Email[ value*=bob] ").length > 0) {
Mkto.setError($jQ("#Email span").prev()[ 0] ,"No Bobs allowed!");
thisIsValid = false;
} else {
Mkto.clearError($jQ("#Email span").prev()[ 0] );
}
return thisIsValid;
}
function formSubmit(elt) {
if (!myFormIsValid()) {
return false;
}
return Mkto.formSubmit(elt);
}
</script>
Here’s another example that checks if a required checkbox, such as a terms of service agreement, is filled before submitting:
<script type="text/javascript" src="/js/public/jquery-latest.min.js" language="Javascript"></script>
<script type="text/javascript">
// set no conflict mode for jquery
var $jQ = jQuery.noConflict();
function myFormIsValid() {
var thisIsValid = true;
// show a message if they fail to check the box
if ($jQ("#TermsOfServiceAgreement").attr('checked') != true) {
Mkto.setError($jQ("#TermsOfServiceAgreement span").prev()[ 0] ,"Please agree to the terms above.");
thisIsValid = false;
} else {
Mkto.clearError($jQ("#TermsOfServiceAgreement span").prev()[ 0] );
}
return thisIsValid;
}
function formSubmit(elt) {
if (!myFormIsValid()) {
return false;
}
return Mkto.formSubmit(elt);
}
</script>
Follow these instructions if you want to retrieve the form fields via Javascript:
Setting or Getting a Form Field Value via Javascript on a Landing Page
The example above also shows you how to set an error field.
If you want to set or clear an error message on a field, you can use these two functions in your validation function. Note: These only work on form fields from the Marketo form designer.
Replace the highlighted yellow bits below:
- Email – the ID of the field where you want to show an error
- error message – the text you want to display for this error
// error -- highlight the field
Mkto.setError($jQ("#Email span").prev()[ 0] , "error message");
// no error -- clear the field
Mkto.setError($jQ("#Email span").prev()[ 0] );
Resolution resolution
For technical assistance contact Marketo Engage Customer Support.