2015-10-05 164 views
4

我有具有错误消息,如下面的例子中的一种形式:如何在'blur'事件触发前触发'submit'事件?

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

步骤来重现问题如下:

打开codepen链接后,

1)焦点在输入栏

2)按提交按钮

3)由于首先触发模糊事件,所以首先隐藏错误消息,从而改变提交按钮的位置。因此点击事件根本没有被注册,我需要再次点击才能提交​​表单。

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

不知怎的,我需要检测触发模糊事件的目标。 看起来relatedTarget使我们能够找出触发模糊事件的元素。但是,这在Firefox中不起作用。

是否有办法找出所有浏览器中的relatedTarget?

+0

您可以简单地延迟隐藏您的错误信息约10毫秒? – somethinghere

+0

而不是'display:none'你也许可以使用'visibility:hidden'?不是真正的答案,但它可以提供一种可能的解决方法。 – ZiNNED

+0

绑定键盘事件/输入处理程序以在有效时删除消息 – charlietfl

回答

6

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

因此,我提出了一种替代方法,而不是解决方案/修复您的确切问题,因为我认为目前的模型可能会很麻烦。

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

+0

在我的实现中,我正在验证'submit'和'blur'上的输入字段。我认为,仅在提交时验证输入字段不是很好的用户交互。但是,无论如何,谢谢你的建议。 – ankakusu

0

根据在this answer中告诉我的内容,我带来了这个解决方案。收听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

+0

这是一个解决方法,@Ates Goral钉住了它。 –

+0

我看到了类似的解决方法。就目前而言,我正在深入挖掘以寻找更好的解决方案。但是谢谢你的注意! – ankakusu