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

[Casey_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.

[Grégoire_Miche2 · Accepted solution]

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

[Chase_Carson]

Sorry my JS knowledge isn't great. Grégoire will this work on embedded forms on non-marketo landing page?

Also do I need to change anything in your code in order for it to work on my form? Or can I just copy and paste it before the closing body tag?

[Anonymous]

Hi Greg,

I used it in my landing page template but it is not working

[Grégoire_Miche2]

Hi Faizal,

Better reopen a new thread, you will get more visibility and more answers.

And provide more info, if possible the page URL.

-Greg

[Anonymous]

Hi Greg,

this is the url : Download

let me know your thoughts on this

[Grégoire_Miche2]

I just tested it and it works. the script just control the correctness of the address. But you should probably use Sanford's or Courtney's version, they are both outstanding developers.

-Greg

[Anonymous]

Oh if it checks for the format then marketo can do that as well. How can I

stop spam submissions in Marketo so no junk email enters into my database

On 11-May-2017 5:31 pm, "Grégoire Michel" <marketingnation@marketo.com>

[Grégoire_Miche2]

Use a Google Recaptcha to avoid robots. Use Courtney's script to avoid non professional emails. Or look into launchpoint solutions for more sophisticated solutions. AFAIK, Etumos is offering such a solution (Etumos Verify - Etumos ). Contact Edward Unthank​ or Sanford Whiteman​ for it.

-Greg

[SanfordWhiteman]

Are you trying to stop non-emailable (as opposed to suspiciously/improperly formatted) addresses from being submitted?  If so, you'll need to use extended validation. Etumos Verify integrates natively with Marketo Forms and is naturally* my recommendation.

*I contributed the forms integration for Verify.

[Phillip_Wild]

Hi Gregoire

Thanks, your code works perfectly! While I understand it may not be perfection for validation, it's going to fix the problem in the short term.

Phil

[Josh_Hill13]

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

[SanfordWhiteman]

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.

[Grégoire_Miche2]

Hi Sanford,

Sorry, I just copied Phillip's regex, just fixed the error on how it was integrated in the template

-Greg

[SanfordWhiteman]

Gotcha, I wasn't blaming anyone anyway... it just doesn't make sense to take a risk on the front end, since the truth is we don't actually care about good-looking/average-looking addresses. We care about real-world *mailable* addresses. And there's no better place to apply Postel's Law than one of Postel's brainchildren, SMTP.