联系表格 7 验证触发事件答案

【问题标题】：Contact Form 7 validation trigger event联系表格 7 验证触发事件
【发布时间】：2016-11-11 07:15:32
【问题描述】：

当用户点击联系表单 7 表单的提交按钮时，我希望页面滚动到验证消息部分。

我的方法：

我使用 jQuery on click 事件作为提交按钮，并在单击时将页面滚动到验证消息部分。

我确定这是不正确的。因为点击它会滚动到该部分，但消息尚未通过 ajax。

那么，有没有办法在联系表单 7 中完成验证时创建一个事件并使用它向下滚动。

【问题讨论】：

可以使用js @MarkWilson的setTimeout函数
那是不正确的。提交表格的时间可能会有所不同

标签： jquery wordpress contact-form-7

【解决方案1】：

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

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

有效的事件是：

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

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

【讨论】：

完美运行，单独控制听众天才:D

【解决方案2】：

联系表格 7 在这种情况下触发 wpcf7:invalid。您可以使用此触发器：

$(window).on('wpcf7:invalid', function() {
    // let's scroll
});

来源：https://github.com/wp-plugins/contact-form-7/blob/master/includes/js/scripts.js（行：109）

【讨论】：

不，不在这里工作。这些事件触发器都不起作用，而且完全没有记录。
您可以在上面第 109 行链接的源代码（IMO 最佳文档）中看到，触发器仍然存在。它应该仍然有效。
奇怪 - 我根本无法使用这种格式。我不得不使用这里看到的 DOM 事件：contactform7.com/dom-events。源代码是文档，就像查看打开的宜家盒子是说明一样；）

【解决方案3】：

这也可以完成这项工作。如果有人有兴趣。

$('.wpcf7-form').ajaxComplete( function(){    
      if($(this).hasClass('invalid') || $(this).hasClass('sent')){
            $('.forkit-curtain').animate({
                scrollTop: $(".wpcf7-response-output").first().offset().top + 100
            }, 2000);
      }
    });

【讨论】：