Contact Form 7 验证触发事件

Question

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

我的做法：

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

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

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

Answer 1

在这种情况下，

Contact Form 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）

Answer 2

这也能起到作用。如果有人感兴趣的话。

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

Answer 3

考虑到关于这个主题的各种回应，插件开发人员似乎改变了他们对每 5 分钟应该如何工作的想法。目前（2017 年第一季度）这是工作方法：

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

有效事件是：

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

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

Contact Form 7 验证触发事件

Contact Form 7 validation trigger event

wordpress

jquery

contact-form-7