即使存在验证错误，Google Analytics 事件也会触发答案

【问题标题】：Google Analytics event firing even when there are validation errors即使存在验证错误，Google Analytics 事件也会触发
【发布时间】：2018-08-14 21:42:17
【问题描述】：

全部！

我已经建立了一个带有联系表格的 WordPress 网站。我添加了一个 javascript 代码来跟踪表单提交事件。

问题在于，即使存在验证错误且未提交表单，Google Analytics 事件也会触发。验证和提交由表单插件完成（它是一个连接到 MS Dynamics CRM 的表单）。

jQuery('div#main_form form').submit(function(e){
    e.preventDefault();
    ga('send', 'event', 'form', 'submit');
    var form = this;
    setTimeout(function(){ form.submit()}, 150);
  });

此外，当您点击提交按钮时，此代码会导致页面重新加载（即使存在验证错误）。

能否请您帮我处理这段代码，以便除非提交表单，否则事件不会触发？我对 JavaScript / jQuery 的了解非常有限，请说的很具体。

非常感谢！

【问题讨论】：

什么表单插件？验证发生在什么时候？
只有在验证成功完成后才能提交表单。这意味着如果验证失败，则不应执行 jQuery('div#main_form form').submit(function(e) 方法。另外，我认为没有必要在 settimeout 内提交表单。

标签： javascript jquery wordpress forms google-analytics

【解决方案1】：

这绝对是特定于插件的行为。在访问者“提交”表单之后肯定会发生所有验证，因此收听“提交”事件对您没有帮助。处理此问题的两种常见方法是 1）在发送 GA 事件之前执行与插件相同的验证 2）可能有一些 JS 钩子由插件提供，如 ajaxsuccess 或 wpcf7:mailsent 事件，因此您可以添加一个监听器事件。但是这些绝对超出了“有限的 JavaScript 知识”，所以我建议你寻求真正的开发人员的帮助

【讨论】：

【解决方案2】：

以下代码解决了这个问题：

jQuery('div#main_form form').submit(function(e){
    e.preventDefault();
    if(!jQuery('div#main_form form').valid()) return;
    ga('send', 'event', 'form', 'submit');
    var form = this;
    setTimeout(function(){ form.submit()}, 150);
  });

【讨论】：