如何在触发“失焦”事件之前触发“提交”事件？

Question

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

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

重现问题的步骤如下：

打开codepen链接后，

1. 聚焦在输入框中

2. 点击提交按钮

3. 由于失去焦点事件先触发，错误消息首先被隐藏，因此提交按钮的位置发生了改变。因此，单击事件根本没有被注册，我需要再次单击才能提交表单。

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

不知何故，我需要检测触发失去焦点事件的目标。

似乎relatedTarget使我们能够找出触发失去焦点事件的元素。但是，在Firefox中，这种方法不起作用。

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

- ankakusu

---

你可以尝试使用visibility: hidden代替display: none，这可能不是你问题的答案，但它可以提供一个可能的解决方法。 - ZiNNED

只需使用以下代码：setTimeout(function(){ errorMsg.addClass('hidden'); },200) - 这将解决您的问题。 - somethinghere

@charlietfl 你所说的“绑定按键事件/输入处理程序”是什么意思？你能举个例子吗？ - ankakusu

@somethinghere 但对用户不是很直观 - charlietfl

@charlietfl 以什么方式对用户不直观？你认为200毫秒的延迟会使他们认为填写表单有误吗？人们甚至在跟踪每个链接您单击时都不会注意到500毫秒的延迟，更别提在错误消失之前的200毫秒的延迟了。 - somethinghere

Answer 1

如果您的意图是在失去焦点时执行字段验证，那么您仍需要一种方法来检查表单提交时是否存在任何验证错误，以避免在存在验证错误时提交表单。

因此，我建议采用替代方法而不是解决问题的方法，因为我认为当前模型可能本身就有问题。

为什么不在表单提交时执行所有字段验证，而不是在字段失去焦点时进行验证，然后在任何字段存在验证错误时阻止提交？

- Ates Goral

---

在我的实现中，我会在“提交”和“失去焦点”时验证输入字段。我认为，仅在提交时验证输入字段并不是一个良好的用户交互方式。但是，无论如何感谢您的建议。 - ankakusu

Answer 2

根据这个答案所说的，我想出了这个解决方案。监听触发在blur之前的mousedown事件，并根据错误消息是否可见来检查用户是否可以提交表单。

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。

- Alvaro Flaño Larrondo

---

我看到了类似的解决方法。目前，我正在深入挖掘以找到更好的解决方案。但是感谢您记录下来！ - ankakusu