联系表格7 AJAX回拨

一直在寻找这个问题，并且无法提出任何文档来概述我想要实现的目标。

我正在使用wordpress和Contact Form 7插件，一切都运行得很好，我想要实现的是在表单提交时运行一些特定的javascript，我知道我们可以在其他设置中使用“on_sent_ok：”，但这仅执行如果表格实际提交。

我想做的是当表单没有提交时做一些其他的javascript，这会将用户抛回到未validation的部分。

我可以使用以下代码在单击表单提交的1.7s后运行，但是它有点草率，好像用户运行缓慢的连接，有可能在表单正确提交之前运行。

$('.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？

谢谢！

Answer 1

鉴于有关此主题的各种回复，插件开发人员似乎会改变他们对每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/

Answer 2

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

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

• wpcf7：无效
• wpcf7：垃圾邮件
• wpcf7：mailsent
• wpcf7：mailfailed
• wpcf7：提交

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

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

Answer 3

有时它可能不起作用，正如Martin Klasson指出的那样，只有’submit’事件有效，最有可能因为它是由一个表单触发并且冒泡到所选对象。 另外据我所知，现在事件有其他名称，如“invalid.wpcf7”，“mailsent.wpcf7”等。总之，这应该有效：

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

这里有更详细的解释： 如何在联系表格7中添加错误的其他设置？

Answer 4

我在这方面做了很多，我发现当只有Submit事件有效时，这意味着你的主题中存在js问题/冲突。

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

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

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

表单的行为必须与此页面上显示的完全相同 ，才能正确触发DOM事件。 一旦你有了它，它应该工作。

我已经使用jQuery 3.3.1和Migrate 3.0.1测试了这个，并且以下事件监听器工作：

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

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