Level 9

Solved

Email validation in Marketo through Javascript

Forum|Forum|9 years ago
April 14, 2016
3 replies
12422 views

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:

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Grégoire_Miche2

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

Josh_Hill13

Level 10

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

SanfordWhiteman

Level 10

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

Level 10

Hi Sanford,

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

-Greg

Grégoire_Miche2Accepted solution

Level 10

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

P

PhillipWi1Author

Level 9

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

Casey_Grimes2

Level 10

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded