2016-11-11 106 views
2

当用户单击联系表单7表单的提交按钮时,我希望页面滚动到验证邮件部分。联系表7验证触发事件

我的方法:

我使用jQuery on click事件提交按钮和点击滚动页面,验证消息部分。

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

那么,有没有办法在联系表格7中进行验证并使用它向下滚动时创建事件。

+0

可以使用的setTimeout的js @MarkWilson –

+0

不会是正确的功能。时间可能会有所不同,以提交表格 –

回答

1

在这种情况下,联系表单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)

+0

不,不在这里工作。这些事件触发器都没有工作,完全没有记录。 –

+0

正如你在上面链接109的源代码(IMO最好的文档)中看到的那样,触发器仍然存在。它应该仍然有效。 –

+0

奇怪 - 我无法得到这种格式的工作。我不得不使用这里看到的DOM事件:https://contactform7.com/dom-events/。源代码的文档与查看打开的宜家盒子的说明相同); –

0

这做这项工作了。如果有人有兴趣。

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

鉴于各种反应关于这一主题的插件开发者似乎改变他们的想法如何这应该每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/