MailShimp JS validation not working
I am using one of the built-in MailChimp forms copied to the Wordpress Popup Builder. The problem is that the JS on the MailChimp form is throwing an error, so the form validation is not working. 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 complete code for the form:
<!-- 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
source to share
In our case, the following code in the hosted file mc-validate.js
answered:
/**
* 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;
},
A line starting with a var url = …
search FORM
with an identifier mc-embedded-subscribe-form
. If a form with this id is not present on the page, the script crashes. In the OP's code, it looks like this form exists, so I'm not 100% sure why the code didn't work on the OP's page. We changed the form ID on our page and this caused the error.
source to share
For me the problem was in the order in which the various scripts were loaded on my site. Playing with this solved the problem. It is imperative that mc-validate.js has to be bound to the script tag with
(function($) {window.fnames = new Array() ...
While I can see that you have kept this order, I felt like leaving this answer to help people who come here in the future with a slightly similar problem like me.
source to share
Like @thirdender below, the code in the posted mc-validate.js file was responsible. And we set the id
shape correctly .
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 won't work correctly by uploading it to a partition <head>
.
I hope this helps someone.
source to share