如何在触发“模糊”事件之前触发“提交”事件？

Question

我有一个包含错误消息的表单，如下例所示：

http://codepen.io/anon/pen/dYWyEM?editors=101

重现问题的步骤如下：

打开codepen链接后，

1) 关注输入字段

2) 按提交按钮

3) 由于先触发了 blur 事件，所以先隐藏了错误信息，从而改变了提交按钮的位置。因此点击事件根本没有注册，我需要再次点击提交表单。

有没有办法先发送提交事件？

不知何故，我需要检测触发模糊事件的目标。 似乎relatedTarget 使我们能够找出触发模糊事件的元素。但是，这在 Firefox 中不起作用。

有没有办法找出所有浏览器中的relatedTarget？

Answer 1

如果你的意图是对blur进行字段验证，你仍然需要一种方法来检查表单提交时是否有任何验证错误，以避免在出现验证错误时提交表单。

因此，我建议一种替代方法，而不是解决您的确切问题的解决方法/修复方法，因为我认为当前的模型一开始可能会很麻烦。

为什么不对表单提交执行所有字段验证而不是字段模糊，然后在任何字段出现验证错误时阻止提交？

Answer 2

根据this answer 中的内容，我提出了这个解决方案。监听mousedown在blur之前触发的事件，根据错误信息是否可见，判断用户是否可以提交表单。

form.on('mousedown','input[type="submit"]', function(e) {
  if(!errorMsg.hasClass("hidden")){
    e.preventDefault();
    alert("Can't submit until the error message is gone");
  }
});

我已经更新了你的CodePen。