联系表7 Ajax回调 [英] Contact Form 7 AJAX Callback

问题描述

一直在寻找围绕这一段时间，不能拿出任何文件来说明一下我想要实现。

Been searching around on this for a while and can't come up with any documentation to outline what i want to achieve.

我用一句话preSS和联系表7插件，一切都工作的很好，我想要实现的是运行于形式的一些特别的JavaScript提交的，我知道我们可以用on_sent_ok其他设置，但这只是如果执行的形式实际上是提交。

I'm using wordpress and the Contact Form 7 plugin, all is working perfectly, what i want to achieve is to run some particular javascript upon form submit, i know we can use "on_sent_ok:" in the additional settings, but this only performs if the form is actually submitted.

我想要做的是做一些其他的JavaScript时，形式不提交确定，这将引发用户返回到没有验证的部分。

What i'd like to do is to do some other javascript when the form doesn't submit ok, which throws the user back to the section which didn't validate.

我可以使用下面的code形式的1.7S后运行提交被点击，但它是一个有点草率，如果用户与慢速连接运行时，这可能会运行在表单提交前的潜力正常。

I can use the following code to run after 1.7s of the form submit being clicked, however it's a bit sloppy as if the user was running with a slow connection, there's potential this could run before the form is submitted properly.

 $('.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);
});

有没有什么特别的功能或钩我可以用它来运行JS当表单AJAX已经完成？

Is there any particular function or hook i can use to run JS when the form AJAX has completed?

谢谢！

推荐答案

在3.3版本新的jQuery的自定义事件触发器进行了介绍：

In version 3.3 new jQuery custom event triggers were introduced:

新：引入5个新的jQuery的自定义事件触发

New: Introduce 5 new jQuery custom event triggers

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

您可以使用 wpcf7：无效如下面的例子：

You can use wpcf7:invalid like the example below:

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

这篇关于联系表7 Ajax回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！