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

Question

我的表单中有一条错误消息，如下例所示：

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

重现问题的步骤如下：

打开codepen链接后，

1）关注输入字段

2）按提交按钮

3）由于首先触发模糊事件，因此首先隐藏错误消息，从而改变提交按钮的位置。因此，点击事件根本没有注册，我需要再次点击提交表格。

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

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

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

Answer 1

如果您打算对模糊执行字段验证，您仍需要检查表单提交上是否存在任何验证错误，以避免在验证错误时提交表单。

因此，我建议采用替代方法，而不是针对您确切问题的解决方法/解决方法，因为我认为当前的模型可能会很麻烦。

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

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。