联系表格 7 AJAX 回调答案

【问题标题】：Contact Form 7 AJAX Callback联系表格 7 AJAX 回调
【发布时间】：2015-03-04 02:19:14
【问题描述】：

对此进行了一段时间的搜索，但无法提供任何文档来概述我想要实现的目标。

我正在使用 wordpress 和 Contact Form 7 插件，一切正常，我想要实现的是在表单提交时运行一些特定的 javascript，我知道我们可以在附加设置中使用“on_sent_ok:”，但是这仅在实际提交表单时执行。

我想做的是在表单提交不正确时执行一些其他 javascript，这会将用户返回到未验证的部分。

我可以使用以下代码在表单提交被点击 1.7 秒后运行，但是这有点草率，好像用户在连接速度较慢的情况下运行，有可能在表单正确提交之前运行。

 $('.wpcf7-submit').click(function() {
setTimeout(function() {
    if ($('.fs1 input,.fs1 textarea').hasClass('wpcf7-not-valid')) {
        $('.pop-up-form').removeClass('pustep2').removeClass('pu-closing');
        $('.form-step').hide();
        $('.fs1').show();

    }
    if ($('.fs2 *').hasClass('wpcf7-not-valid')) {
        alert('error on page 2 - take user back to the area with issues')
    }
}, 1700);
});

当表单 AJAX 完成时，我可以使用任何特定的函数或钩子来运行 JS 吗？

谢谢！

【问题讨论】：

嗨 - 请注意，接受的答案不再是有效的解决方案，如果您能够更改它，这将对新访问者有所帮助

标签： javascript jquery ajax wordpress contact-form-7

【解决方案1】：

在 3.3 版本中引入了新的 jQuery 自定义事件触发器：

新：引入 5 个新的 jQuery 自定义事件触发器

wpcf7：无效
wpcf7:垃圾邮件
wpcf7:邮件发送
wpcf7：邮件失败
wpcf7:提交

您可以使用wpcf7:invalid，如下例所示：

$(".wpcf7").on('wpcf7:invalid', function(event){
  // Your code here
});

【讨论】：

我希望这在正确的文档中，而不仅仅是更改日志。我过去在这个上挠了挠头！
谢谢维森特！我也为此挠头了一段时间！我一回到我的机器上就会检查这个并标记为正确:)
@rnevius 我同意，这方面的文档非常有限。
完美运行！再次感谢 Vicente。 :)
这些联系表 7 JavaScript 事件/钩子的信息应该放在文档中 - 我同意 :-)

【解决方案2】：

鉴于对这个主题的反应多种多样，插件开发人员似乎每 5 分钟就会改变一次关于如何工作的想法。目前（2017 年第一季度）这是工作方法：

document.addEventListener( 'wpcf7mailsent', function( event ) {
  alert( "Fire!" );
}, false );

有效的事件是：

wpcf7invalid — 当 Ajax 表单提交完成时触发成功，但邮件尚未发送，因为有字段输入无效。
wpcf7spam — 当 Ajax 表单提交时触发已成功完成，但尚未发送邮件，因为可能已检测到垃圾邮件活动。
wpcf7mailsent — Ajax 时触发表单提交已成功完成，邮件已发送。
wpcf7mailfailed — 当 Ajax 表单提交完成时触发成功，但发送邮件失败。
wpcf7submit — 触发当 Ajax 表单提交成功完成时，无论其他事件。

酱：https://contactform7.com/dom-events/

【讨论】：

以防万一有人得到这个答案...我没有调用函数wp_footer() 来阻止这些事件触发。简单的疏忽，但它可能有助于检查它是否在您的主题中！
谢谢，它成功了，但是如果我想对表单字段执行一些手动验证怎么办？正如我在上面或插件网站上看到的列表在提交表单之前没有提供任何事件。有什么想法吗？
@meDeepakJain 你可能在两年前就完成了这个，但我通过向提交按钮添加一个 addEventListener 开始了这条路。如果您注意事件处理顺序，我认为您可以做到这一点。不过你可能已经这样做了……
今天一个客户要求修复 INTERNET EXPLORER :( 它不适用于 IE =(

【解决方案3】：

有时它可能不起作用，正如Martin Klasson 指出的那样，只有“提交”事件起作用，很可能是因为它由表单触发并冒泡到选定的对象。另外据我所知，现在事件有其他名称，例如“invalid.wpcf7”、“mailsent.wpcf7”等。简而言之，这应该可以：

jQuery('.wpcf7').on('invalid.wpcf7', function(e) {
    // your code here
});

更详细的解释在这里：How to add additional settings on error in Contact form 7?

【讨论】：

对我来说还是一无所获；这些事件似乎都不起作用（而且我找不到任何合适的文档......）
基于version 3.3 - 更改日志，@smesh 解决方案应该可以工作。

【解决方案4】：

我对此进行了一番尝试，发现只有Submit事件有效时，这意味着您的主题中存在js问题/冲突。

如果它是您构建的自定义主题，请确保 jQuery 和 jQuery migrate 都按此顺序加载，并且 Contact form 7 js 也加载到页脚中。

确保您的 php 模板中有 wp_head 和 wp_footer。

要使 DOM 事件起作用，您的表单必须处于 Ajax 模式。如果页面在提交时重新加载，请忘记 DOM 事件。如果您在 URL 中显示了表单 ID，同样的事情。我的表单最初没有处于 Ajax 模式，因为没有加载联系表单 JS，并且 jQuery Migrate 也是。

表单的行为必须为 exactly like shown on this page 才能正确触发 DOM 事件。一旦你有了它，它应该可以工作了。

我已经使用 jQuery 3.3.1 和 Migrate 3.0.1 对此进行了测试，并且以下事件侦听器有效：

document.addEventListener( 'wpcf7mailsent', function( event ) {
    console.log('mail sent OK');
    // Stuff
}, false );

要检查您的主题是否是罪魁祸首，请使用 Wordpress 的默认主题测试您的表单，如果它有效，您就知道问题出在您身上，而不是在开发人员的文档中！

【讨论】：

【解决方案5】：

此代码从 5.8.x 版本开始工作：

$('.wpcf7').on('wpcf7invalid wpcf7spam wpcf7mailsent wpcf7mailfailed', function () {  
   // your code here
});

【讨论】：