Blocking Spam & Personal Domains Issue

[jinawatson]

Hi! I'm trying to us @SanfordWhiteman's script to block personal and spam domains but for some reason when I add the script to my Marketo landing page HTML, it just redirects back to the page once clicking submit versus giving the "Must be business email" validation rule.

Here's the landing page: https://it.recastsoftware.com/automatedpatching.html

I did remove the script as the page is live and I couldn't get the redirect to stop but this is what code I dropped in before the </body> tag.

<!-- FormsPlus libraries -->
<script id="teknklFormsPlus-EmailPattern-1.0.3" src="https://it.recastsoftware.com/rs/563-ODB-688/images/teknkl-formsplus-emailpattern-1.0.3.js?version=0"></script>
<!-- /FormsPlus libraries -->

And here's the modified JS:

/*
 * @author Sanford Whiteman
 * @version v1.1 2020-11-15
 * @copyright © 2020 Sanford Whiteman
 * @license Hippocratic 2.1: This license must appear with all reproductions of this software.
 *
 *
 *
 */

(function () {
   const invalidDomains = [
      "gmail.com", 
      "yahoo.com", 
      "hotmail.com",
      "sandy@fig1.com",
      "jourrapide.com",
      "teleworm.us",
      "armyspy.com",
      "rhyta.com",
      "cuvox.de",
      "dayrep.com",
      "einrot.com",
      "fleckens.hu",
      "gustr.com",
      "superrito.com",
      "sandy@fig1.net"
      ]
      invalidMessage = "Must be a Business email.";

   const interestingEmailField = "Email";

   /* NO NEED TO ALTER BELOW THIS LINE */

   MktoForms2.whenReady(function (mktoForm) {
      const formEl = mktoForm.getFormElem()[0],
         emailEl = formEl.querySelector("[name='" + interestingEmailField + "']");

      mktoForm.onValidate(extendedEmailValidation);

      function extendedEmailValidation(nativeValid) {
         if (nativeValid === false) return;

         let currentValues = mktoForm.getValues(),
            originalSubmittable = mktoForm.submittable(),
            email = currentValues[interestingEmailField];

         if (email) {
            if (FormsPlus.emailPattern.match(email, invalidDomains)) {
               console.log("Email matches pattern, forcing submittable(false)");
               emailEl.classList.add("customInvalid");
               emailEl.setAttribute("aria-invalid", "true");
               mktoForm.submittable(false);
               mktoForm.showErrorMessage(invalidMessage, MktoForms2.$(emailEl));
            } else {
               console.log("Email does not match pattern, continuing");
               emailEl.classList.remove("customInvalid");
               emailEl.setAttribute("aria-invalid", "false");
               mktoForm.submittable(originalSubmittable);
            }
         }
      }
   });
   
})();

[SanfordWhiteman · Accepted solution]

Nope, you have a file with that name, but it has the wrong content.

[SanfordWhiteman]

You need to download the actual FormsPlus::EmailPattern library and host that in Design Studio.

Now, you’re just hosting the same JS that calls the FormsPlus.emailPattern function, the JS library is nowhere to be found.

[jinawatson]

Thanks Sanford - that link didn't work for me. Is there another link for me to download the library file?

[SanfordWhiteman]

The forum had mangled the URL, click it again now.

[jinawatson]

It looks like that's the file I already have installed on Design Studio.

[SanfordWhiteman · Accepted solution]

Nope, you have a file with that name, but it has the wrong content.

[jinawatson]

Okay - I replaced it when the file you linked, but next question is where does this go then?

/*
 * @author Sanford Whiteman
 * @version v1.1 2020-11-15
 * @copyright © 2020 Sanford Whiteman
 * @license Hippocratic 2.1: This license must appear with all reproductions of this software.
 *
 *
 *
 */

(function () {
   const invalidDomains = [
      "gmail.com", 
      "yahoo.com", 
      "hotmail.com",
      "sandy@fig1.com",
      "jourrapide.com",
      "teleworm.us",
      "armyspy.com",
      "rhyta.com",
      "cuvox.de",
      "dayrep.com",
      "einrot.com",
      "fleckens.hu",
      "gustr.com",
      "superrito.com",
      "sandy@fig1.net"
      ]
      invalidMessage = "Must be a Business email.";

   const interestingEmailField = "Email";

   /* NO NEED TO ALTER BELOW THIS LINE */

   MktoForms2.whenReady(function (mktoForm) {
      const formEl = mktoForm.getFormElem()[0],
         emailEl = formEl.querySelector("[name='" + interestingEmailField + "']");

      mktoForm.onValidate(extendedEmailValidation);

      function extendedEmailValidation(nativeValid) {
         if (nativeValid === false) return;

         let currentValues = mktoForm.getValues(),
            originalSubmittable = mktoForm.submittable(),
            email = currentValues[interestingEmailField];

         if (email) {
            if (FormsPlus.emailPattern.match(email, invalidDomains)) {
               console.log("Email matches pattern, forcing submittable(false)");
               emailEl.classList.add("customInvalid");
               emailEl.setAttribute("aria-invalid", "true");
               mktoForm.submittable(false);
               mktoForm.showErrorMessage(invalidMessage, MktoForms2.$(emailEl));
            } else {
               console.log("Email does not match pattern, continuing");
               emailEl.classList.remove("customInvalid");
               emailEl.setAttribute("aria-invalid", "false");
               mktoForm.submittable(originalSubmittable);
            }
         }
      }
   });
   
})();

[Jo_Pitts1 · Accepted solution]

@jinawatson,

if I'm reading things correctly, inside <script> and </script> tags on the page with the form.

Cheers

Jo 

[jinawatson]

Yep! That was it. 🙂 Thank you!!

[dtavangar]

It would be inside the <Script src=""> please also see https://nation.marketo.com/t5/product-discussions/best-way-to-add-a-script-in-a-guided-landing-page/... 

[Jo_Pitts1]

@dtavangar , I'm not quite sure what you were responding to here?