Question

我有一个在Bootbox（它本身是Bootstrap模态的顶层）上创建的表单。创建完成后，我会致电

$('#myForm').validate()

在上面。

该行为的理想部分是，当用户在表单中切换时，他们可以立即看到他们弄乱了其中一个字段的反馈。在点击“选项卡”或单击其他位置之前输入了非电子邮件地址？警告和错误消息。太好了！

但是令人不快的是，模糊吞噬了其他事件。因此，如果用户选择单击“取消”（完全知道该表单无效），则不会听到单击取消的消息，并且其处理程序也不会触发。第二次单击（现在焦点完全不在窗体上）并按预期取消触发。我不希望用户单击两次。

我看到了一种完全禁用模糊的技术，但是随后失去了上述理想的行为，我也不希望这样做。理想情况下，我追求的是“嗯，我很模糊，但我也知道用户在点击什么”。

[编辑添加：]

我已经注意到这很令人困惑，所以让我尝试一种不同的方法：是否可以处理表单（已调用.validate()），然后单击在整个页面上的任何其他可点击项目上，并成功触发其点击处理程序？

[再次编辑：]

基于Sparky的演示，我连线了一个警告，以在模糊时在输入下方显示。因此，要查看实际问题，请启动此小提琴：https://jsfiddle.net/bd1fhpu3/

然后在单击“仅一个按钮”之前，单击输入字段之一。单击“只是一个按钮”的上半部分，以确保在释放鼠标按钮时警告标签已将其从光标的热点中挤出。

无论如何，这只是说明问题所在。解决该问题可能不在问题范围之内，但是似乎值得分享，以防其他人遇到此问题。要解决此问题，我要么需要将Bootbox的click事件重写为一个mousedown事件，而不是单击（然后您无需按下并释放），要么我可以通过避免重新定位来“解决问题”按钮。可能是一个静态高度对话框，其高度足以容纳表格和任何可能的警告。绝对有点像这样的“ hack”，因为您永远不知道以后是否要做其他会使问题再次出现的事情。但这将是一个快速简便的临时修复程序。

Answer 1

您无法使用内置的onfocuout函数，因为JavaScript可能无法知道聚焦到另一个字段和聚焦到取消按钮之间的区别。

您必须完全禁用onfocusout并编写一些自定义事件处理程序。

您的代码稀疏，所以我的回答将非常通用。

$('#myForm').validate({
    // other options here
    onfocusout: false;   // disable default blur event
});

然后编写一个事件处理程序，当他们将焦点放在input上时以编程方式触发对表单的验证，而当他们将焦点放在任何内容（如取消按钮）上时将不执行任何操作。

$('#myForm input').on('focus', function() {
    $('#myForm').valid();  // trigger validation on the form
});

但是，这将触发整个表单的验证。如果您只想触发失去焦点的一个领域的验证，那么您将回到平方，因为该事件只知道失去了焦点，而不是知道去向何方。

Answer 2

仅出于后代考虑，这是一个“答案”。也许有一天会有帮助。你就是永远不知道。

没有代码在“错误地”运行，因此实际上没有提供修复程序或代码示例。这是正在发生的事情：

用户是该领域的焦点
用户按下鼠标按钮（但尚未执行释放操作）
模糊事件触发，这导致表单错误警告出现在字段下方。这还具有将屏幕上的Y轴上的“取消”按钮按下的最终效果。
用户释放鼠标按钮，通常可以完成“点击”处理程序。

但是，在＃4中，由于“取消”按钮不再位于光标下方，因此绑定到该按钮的click事件监听器不会触发。

该演示（只要存在于互联网上，将在下面的评论中）。但是，提供与之配套的代码示例是没有意义的。演示结束后，我将删除评论。

到目前为止，我选择不执行的可能步骤（解决方法/黑客）：

修改对话框，以便在发生mousedown事件时按钮不会移动，这意味着“ click”事件已成功完成
提供用于将mousedown事件替换为按钮上的click事件的自定义代码。但是，这会导致丢失相当常见的UI约定
强制用户按ESC取消，而不是单击按钮
[通过评论提供给Tieson T.。]如果可以在错误消息上使用某些自定义样式，则一个可能的选择是用visibility: none而不是display: non e隐藏它们。前者会隐藏文本，但仍保留文本的垂直空间，后者则不会（因此，为什么模态会扩展）。这将防止在聚焦事件期间按钮可能移动。您将获得额外的空格，但是您可以通过删除表单组的底部边距来消除其中的一些空白（假设您正在使用它）

我确定还有其他解决方法，但这是一个起点。

jQuery Validate：检测基础点击而不是模糊

2 个答案: