Adding custom validation to a Marketo form before submitting it

[#1]

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]);