MailChimp JS 验证不起作用
Posted
技术标签:
【中文标题】MailChimp JS 验证不起作用【英文标题】：MailChimp JS Validation Isn't Working 【发布时间】：2015-10-07 20:42:05 【问题描述】：我正在使用 MailChimp 的嵌入式表单之一，复制到 wordpress 弹出窗口构建器中。问题是 MailChimp 表单中的 JS 导致错误，因此表单的验证不起作用。这是错误：
Uncaught TypeError: Cannot read property 'replace' of undefined
// This error occurs in the file: mc-validate.js:198
这是完整的表单代码：
<!-- 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_signupbackground:#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-->
编辑：我用于弹出窗口的插件是Indeed Smart PopUp
【问题讨论】：
【参考方案1】：在我们的例子中，托管文件mc-validate.js 中的以下代码负责：
/**
* 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;
,
以var url = … 开头的行正在寻找ID 为mc-embedded-subscribe-form 的FORM。如果页面中缺少具有此 ID 的表单，则脚本将失败。在 OP 的代码中，这种形式似乎存在，所以我不能 100% 确定为什么代码在 OP 的页面上失败。在我们的页面中，我们更改了表单的 ID，这就是错误的原因。
【讨论】：
【参考方案2】：对我来说，问题在于我网站上各种脚本的加载顺序。解决这个问题。至关重要的是，必须使用
将 mc-validate.js 链接到脚本标记之前(function($) window.fnames = new Array() ...
虽然我可以看到您保留了该订单，但希望留下此答案以帮助将来遇到类似问题的人，就像我一样。
【讨论】：
【参考方案3】：就像下面的@thirdender，托管文件mc-validate.js 中的代码负责。我们确实正确地将id 放置在表单上。
getAjaxSubmitUrl: function()
var url = $("form#mc-embedded-subscribe-form").attr("action");
url = url.replace("/post?u=", "/post-json?u=");
url += "&c=?";
return url;
,
对我们而言，解决方法是将脚本加载到网站的页脚中。
将其加载到<head> 部分将无法正常工作。
我希望这对某人有所帮助。
【讨论】：
【参考方案4】：实际上，如果将脚本移动到页面的页脚，则错误已得到纠正，但这是合乎逻辑的，因为脚本在 Dom 中创建它之前调用了一个变量，从逻辑上讲，它的状态将始终未定义。
如果您想将脚本放在 Web 的标题中，则必须为 url 变量提供一个值，以防它不可用，并且该值必须从操作中获取表单的字段，就这么简单。
if (typeof url == 'undefined') url = "https://yoursite.us85.list-manage.com/subscribe/post?u=13s79c67xxb4c8ad2339ce34a&id=d1htsl3a46";
函数如下所示：
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;,
希望对你有帮助！
【讨论】：
【参考方案5】：如果您只是复制 HTML 代码以将其嵌入您的网站，它将起作用。在我的例子中，网站变慢了，并不是所有的 mailchimp 页面都出现了。 所以我按照以下步骤操作：
为了安全起见，将function.php文件中的css链接作为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');
您可以使用该样式#mc_embed_signupbackground:#fff;... 如果你愿意，但如果你有自己的风格，那就没有必要了。
将表单完全按照 mailchimp 提供的方式放在您正在使用的页面上。 action="" 应该有 mailchimp 的大名。
<div id="mc_embed_signup">
<form action="https://yoursite.us85.list-manage.com/subscribe/post?u=13s79c67xxb4c8ad2339ce34a&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>
由于我将 jquery 作为 wp_enqueue_script 包含在我的函数中，因此我没有包含以下脚本。
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
最后，我在 main.js 文件中包含了 jquery 函数并对其进行了调整：
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";
);
根据https://developer.wordpress.org/reference/functions/wp_enqueue_script/
" 当您将依赖于 jQuery 的脚本加入队列时，请注意 WordPress 中的 jQuery 在 noConflict 模式下运行，这意味着您不能使用常见的 $ 别名。您必须使用完整的 jQuery。或者，使用noConflict 包装器中的 $ 快捷方式。”
jQuery( document ).ready( function( $ )
// $() will work as an alias for jQuery() inside of this function
[ your code goes here ]
);
我希望它有效。
【讨论】：
以上是关于MailChimp JS 验证不起作用的主要内容，如果未能解决你的问题，请参考以下文章