Adding custom validation to a Marketo form before submitting it

Version 4

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