Question

我正在使用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_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-->

编辑：我用于弹出窗口的插件是Indeed Smart PopUp

Answer 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为FORM的{{1}}。如果页面中缺少具有此ID的表单，则脚本将失败。在OP的代码中，看起来这个表单存在，所以我不能100％确定代码在OP页面上失败的原因。在我们的页面中，我们更改了表单的ID，这就是错误的原因。

Answer 2

对我来说，问题在于我网站上加载各种脚本的顺序。玩弄它解决了这个问题。至关重要的是，必须使用

将mc-validate.js链接到脚本标记之前

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

虽然我可以看到你保留了这个顺序，但是想留下这个答案来帮助那些将来到这里的人，问题就像我一样。

Answer 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>部分无法正常工作。

我希望这有助于某人。

Answer 4

实际上，如果将脚本移到页面的页脚，则可以纠正错误，但这是合乎逻辑的，因为脚本在Dom中创建变量之前先调用了变量，从逻辑上讲，其状态始终是不确定的。

如果在我的情况下，如果您希望将脚本放置在Web标头中，则必须为url变量提供一个值，以防它不可用，并且该值必须从操作中获取表单的字段，就这么简单。

if (typeof url == 'undefined') {url = "https://yoursite.us85.list-manage.com/subscribe/post?u=13s79c67xxb4c8ad2339ce34a&amp;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&amp;id=d1htsl3a46";}url = url.replace ("/ post? u =", "/ post-json? u =");url + = "& c =?";return url;},

希望对您有帮助！

Answer 5

如果您只复制HTML代码以将其嵌入到您的网站中，它将起作用。以我为例，该网站变慢，并且并非所有mailchimp页面都出现。因此，我按照以下步骤操作：

出于安全原因，请将css链接作为enqueue_style放在function.php文件上：

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_signup {background：#fff; ... 如果需要的话，但是如果您有自己的风格，则不必要。

将表单完全按照mailchimp在您使用的页面上给您的形式放置。 action =“”应该具有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>

由于我将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验证不起作用

5 个答案: