14 Replies Latest reply on May 11, 2017 1:47 PM by Grégoire Michel

    Email validation in Marketo through Javascript

    Phillip Wild

      Hi Community!

       

      We've been finding that unfortunately Marketo forms have pretty crappy email validation on them as default. Using the "Email" field means that a user is only required to enter an email with an "@" symbol - they don't need a period "." This means we get a bunch of junk emails that fail validation in our other systems.

       

      Here's the code my developer gave me to solve this:

       

      <script>

        MktoForms2.loadForm("//app-ab06.marketo.com", "110-AIL-152", 1330, function(form){

            form.onValidate(function(){

              // Get the values

              var vals = form.vals();

              var re = new RegExp(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i);

       

       

              if(re.test(vals.Email)){

                form.submittable(true);

              }

              else{

                form.submittable(false);

                var emailElem = form.getFormElem().find("#Email");

                form.showErrorMessage("Please enter a valid email format", emailElem);

              }

            });

          })

      </script>

       

      If I was using a "self-guided" landing page, I know how to implement this - simply create a HTML element and drop this script in the HTML code section. But with a guided landing page, it doesn't seem to work.

       

      I've tried two ways - dumping it at the bottom of the raw code (after "editing draft" on my template), below where the other scripts are, and secondly, dropping it into a section via the landing page editor (much like I would with a "self-guided" page). Neither seems to work.

       

      Any ideas? Is there an easier way to do this? I know you can "mask input" with fields in Marketo forms - is this a better way of doing it? Will there be disadvantages if I use this field type instead of "Email" field type?

       

      Thanks in advance!

       

      Phil

        • Re: Email validation in Marketo through Javascript
          Josh Hill

          Sanford Whiteman has probably posted on this before. Check developers.marketo.com too.

            • Re: Email validation in Marketo through Javascript
              Sanford Whiteman

              Thanks, Josh.

               

              Phillip, your developer's regex is broken: don't use it.  Greg's is broken, too.  Courtney's is a little better, but it's still going to barf on perfectly valid emails.

               

              There's nothing surprising about this, as it's been known for a long time that writing a single regex to catch all valid emails is hopeless. Cool as regexes are, they can't solve everything.  You would not find a mail server -- a server which is actually responsible for delivering email -- using a single regex, so there's no reason to think that you can reduce it to a one-liner and accurately reflect the real world.

               

              Here, for example, is the local mailbox code parser from sendmail (which still doesn't support the full set of possible addresses):

               

              The bottom line, if you don't want to falsely turn away leads, is you need to either [a] validate only the domain and not try to apply incomplete intelligence about the the local-part (mailbox); [b] use a true verification service that connects to the remote mailserver and sees if the mailbox exists; or [c] use a JS validator that's written to the spec, meaning it's not a regex.

            • Re: Email validation in Marketo through Javascript
              Grégoire Michel

              Hi Phillip,

               

              Try this at the bottom of the guided LP template:

              <script>

              MktoForms2.whenReady(function (form) {

                    form.onValidate(function(){

                      // Get the values

                      var vals = form.vals();

                      var re = new RegExp(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i);

               

                      if(re.test(vals.Email)){

                        form.submittable(true);

                      }

                      else{

                        form.submittable(false);

                        var emailElem = form.getFormElem().find("#Email");

                        form.showErrorMessage("Please enter a valid email format", emailElem);

                      }

                    });

              });

              </script>

               

              -Greg

              2 of 2 people found this helpful
              • Re: Email validation in Marketo through Javascript
                Courtney Grimes

                Hi Phillip,

                 

                I suppose it depends on whether it's human error or bots performing this behavior, but I've been using mailcheck.js to handle instances like this when it's human error and then just doing the following for Marketo:

                 

                $(document).ready(function(){

                  MktoForms2.whenReady(function (form){

                          var domains = ["yahoo.com", "google.com", "hotmail.com", "gmail.com", "me.com", "aol.com", "mac.com",

                      "live.com", "comcast.net", "googlemail.com", "msn.com", "hotmail.co.uk", "yahoo.co.uk",

                      "facebook.com", "verizon.net", "sbcglobal.net", "att.net", "gmx.com", "mail.com", "outlook.com"];

                 

                    var topLevelDomains = ["co.uk", "com", "net", "org", "info", "edu", "gov", "mil"];

                   

                    // var superStringDistance = function(string1, string2) {

                    // string distance algorithm of your choosing

                    // }

                    var selector = '#Email, .mktoEmailField, .mktFormEmail, input[type=email]';

                    $(selector).on('blur', function(){

                       

                        $(this).mailcheck({

                            domains: domains,                      

                            topLevelDomains: topLevelDomains,      

                            //distanceFunction: superStringDistance,

                            suggested: function(element, suggestion) {

                       

                                var $parent = $(selector).parent();

                                $('.mailcheck-msg', $parent).remove();

                                $parent.append('<span class="mailcheck-msg">Did you mean <a href="#" class="mailcheck-suggestion">' + suggestion.full + '</a>?</span>');

                               

                            },

                            empty: function(element) {

                           

                                var $parent = $(selector).parent();

                                $('.mailcheck-msg', $parent).remove();

                                if ( !$(selector).val().match(/^[\w\d\.\-\_']+@([\w\d\-]+\.)+\w{2,}$/) )

                                $parent.append('<span class="mailcheck-msg mailcheck-error">Please enter a valid email address.</span>');

                               

                            }

                        });

                $('a.mailcheck-suggestion').on('click', function(){

                $(selector).val( $(this).html() );

                $(this).parent().remove();

                return false;

                });       

                    });   

                });

                });

                 

                Obviously feel free to tweak the deployment code as needed for your purposes.