MailChimp JS Validation Isn't Working

Question

I am using one of MailChimp's embedded forms, copied into a wordpress popup builder. The issue is the JS in MailChimp's form is causing an error, so the validation of the form doesn't work. Here is the error:

Uncaught TypeError: Cannot read property 'replace' of undefined
// This error occurs in the file: mc-validate.js:198

And here is the full form code:

    <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:500px;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_c86e002570c2075b57186bd84_ee52af27a3" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Edit: The plugin I'm using for the popup is Indeed Smart PopUp

Answer 1

In effect the error is corrected if the script is moved to the footer of the page, but it is logical because the script calls a variable before it is created in the Dom, logically its status will always be undefined.

If you as in my case want to put the script in the header of the web, you will have to give a value to the url variable in case it is not available, and that value will have to be taken from the action field of the form, as simple as that.

if (typeof url == 'undefined') {url = "https://yoursite.us85.list-manage.com/subscribe/post?u=13s79c67xxb4c8ad2339ce34a&id=d1htsl3a46";}

The function would look like this:

getAjaxSubmitUrl: function () {var url = $ ("form # mc-embedded-subscribe-form"). attr ("action");if (typeof url == 'undefined') {url = "https://yoursite.us85.list-manage.com/subscribe/post?u=13s79c67xxb4c8ad2339ce34a&id=d1htsl3a46";}url = url.replace ("/ post? u =", "/ post-json? u =");url + = "& c =?";return url;},

I hope it helps!

Answer 2

In our case, the following code in the hosted file mc-validate.js was responsible:

/**
 *  Grab the list subscribe url from the form action and make it work for an ajax post.
 */
getAjaxSubmitUrl: function() {
    var url = $("form#mc-embedded-subscribe-form").attr("action");
    url = url.replace("/post?u=", "/post-json?u=");
    url += "&c=?";
    return url;
},

The line that starts var url = … is looking for a FORM with the ID mc-embedded-subscribe-form. If a form with this ID is missing from the page, the script fails. In OP's code it looks like this form exists, so I'm not 100% sure why the code was failing on OP's page. In our page, we had changed the form's ID, and that was the cause of the error.

Answer 3

Just like @thirdender below, the code in the hosted file mc-validate.js was responsible. And we DID correctly have the id placed the form.

getAjaxSubmitUrl: function() {
  var url = $("form#mc-embedded-subscribe-form").attr("action");
  url = url.replace("/post?u=", "/post-json?u=");
  url += "&c=?";
  return url;
}, 

The fix, for us, was to load the script into the footer of the website.
It would not work correctly by loading it into the <head> section.

I hope this helps someone.