联系表格7 AJAX回拨

Question

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

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

我想做的是当表单没有提交确定时做一些其他的javascript,这会将用户返回到未验证的部分.

我可以使用以下代码在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

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

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

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

你可以wpcf7:invalid像下面的例子一样使用:

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

Answer 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/

Answer 3

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

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

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

Answer 4

此代码自 5.8.x 版本起有效：

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