如何在 Google 标签管理器限制内的表单验证后执行代码？

Question

我需要在提交表单时以及使用 Google 跟踪代码管理器验证表单后调用跟踪代码。我没有直接访问站点代码的权限。我只能从 Google 跟踪代码管理器执行脚本。

我搜索了 web for an answer，但找不到有效的东西。

我试过：

jQuery('#formId').on('submit',function(){
    console.log('test');
})

但这会在表单验证字段之前打印 "test"，因此如果我将字段留空，它仍会打印 "test".

我尝试了 I found 的不同方法：

jQuery('#formId').on('submit',function(){
    if (jQuery('#formId').valid()){
     console.log('test');
    }
})

或

jQuery('#formId').on('submit',function(){
    if (jQuery(this).valid()){
     console.log('test');
    }
})

或

jQuery('#formId').on('submit',function(event){
    if (jQuery(event).valid()){
     console.log('test');
    }
})

但他们都是returnVM914:2 Uncaught TypeError: jQuery(...).valid is not a function

我如何运行来自 Google 标签管理器的脚本，在表单验证后运行在表单提交上？

Answer 1

您似乎在尝试使用 jquery 验证插件，它不是本机 jquery。您可以通过脚本标签添加它：

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

但是要使用valid功能，其实还需要提前设置校验规则：

var form = jQuery('#formId');


form.validate() 
form.on('submit', function(event) {
  if (form.valid()) {
    consoel.log('good now')
  }
})

这将导致对表单中输入的任何网络原生验证指令进行验证，如果这不是使用网络原生验证指令，（就像它使用 angular 或一些外部库），你会需要在 validate 函数中手动定义验证规则或做一些完全不同的事情...这里是文档：https://jqueryvalidation.org/

公平警告，validate 和 valid 函数实际上进行 DOM 操作并且可以覆盖在其他地方应用的事件侦听器，因此请谨慎行事。您这样做是在双手被绑在背后，而不仅仅是访问站点代码。

如果您不能添加外部插件，那么情况就大不一样了。

Answer 2

有问题的联系表有 class wpcf7。网络搜索表明表单及其验证逻辑由 Wordpress 插件 Contact Form 7 (its JavaScript logic is currently available here 实现，由 Autoptimize)

压缩

幸运的是，Confact Form 7 提供了自定义事件以连接到其验证逻辑中，记录在此处：https://contactform7.com/dom-events/。

您问题的解决方案：

jQuery('.wpcf7').on('wpcf7mailsent', function(event) {
    console.log('test');
});

备注：

How to excute code after form validation within Google Tag Manager constrictions?