MailChimp JS Validation Isn’t Working

1 Views

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:

Read More
    <!-- 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

Post Views: 1

Related posts

5 comments

  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&amp;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&amp;id=d1htsl3a46";}url = url.replace ("/ post? u =", "/ post-json? u =");url + = "& c =?";return url;},

    I hope it helps!

  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.

  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.

  4. For me, the problem was with the order of loading of various scripts on my website. Playing around with that solved the issue. Crucially, mc-validate.js had to be linked to before the script tag with 

    (function($) {window.fnames = new Array() ...

    Though I can see that you kept that order, wanted to leave this answer to help people who get here in the future, with a slightly similar problem, like I did.

  5. It will work if you just copy the HTML code to embed it in your site. In my case, the site became slow and not all mailchimp pages showed up.
    So I followed these steps:

    For safety reasons, put the css link on function.php file as an enqueue_style:

    function your_chosen_name_script_enqueue() {
  wp_enqueue_style('mailchimpcss', 'https://cdn-images.mailchimp.com/embedcode/classic-10_7.css'); wp_enqueue_script('jquery3.4','https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
}
add_action('wp_enqueue_scripts', 'your_chosen_name_script_enqueue');

    You can use that style #mc_embed_signup{background:#fff;…
    if you want, but it is not necessary if you have your own style.

    Put the form exactly as mailchimp gave you on the page you are using it.
    action=”” should have that big name given by mailchimp.

    <div id="mc_embed_signup">
  <form action="https://yoursite.us85.list-manage.com/subscribe/post?u=13s79c67xxb4c8ad2339ce34a&amp;id=d1htsl3a46" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    ...
  </form>
</div>

    As I am including the jquery as an wp_enqueue_script on my function, I DIDN’T include the script below.

    <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>

    Last, I included the jquery function on my main.js file and adapted it like that:

    jQuery(document).ready(function($) {
  // $() will work as an alias for jQuery() inside of this function
  window.fnames = new Array();
  window.ftypes = new Array();
  fnames[0] = "EMAIL";
  ftypes[0] = "email";
  fnames[1] = "FNAME";
  ftypes[1] = "text";
  fnames[2] = "LNAME";
  ftypes[2] = "text";
  fnames[3] = "ADDRESS";
  ftypes[3] = "address";
  fnames[4] = "PHONE";
  ftypes[4] = "phone";
});

    According to https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    ” When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode, which means you cannot use the common $ alias. You must use the full jQuery instead. Alternately, place your code using the $ shortcut inside a noConflict wrapper.”

    jQuery( document ).ready( function( $ ) {
    // $() will work as an alias for jQuery() inside of this function
    [ your code goes here ]
} );

    I hope it works.

Comments are closed.