jQuery验证：检测潜在的点击，而不是模糊

问题描述 投票：0回答：2

我有一个Bootbox（本身引导的模式之上的一层）中创建的形式。一旦它被创建，我打电话

$('#myForm').validate()

在上面。

行为的可取的是，现在通过表单的用户标签，他们能看到即时的反馈，他们已经搞砸的领域之一。打“标签”或点击其他地方之前进入了一个非电子邮件地址？警告和错误消息。大！

但不希望的事情是模糊吃其他事件。因此，如果用户选择，而不是打“取消”（明知形式无效），则单击取消未闻及处理程序将不会触发。第二次单击（现在的焦点是关闭的形式共）和如预期取消火灾。我不希望用户必须点击两次。

我看到了一种技术，用于完全禁用模糊，但随后上述所需的行为，然后输了，我不希望任何。理想情况下，“好了，我模糊了，但我也知道什么是用户点击”是我后。

[编辑补充：]

它已经到了我的注意，这是令人困惑，所以让我尝试了不同的方法的问题：是否有可能要使用表单（已经过.validate()调用它），然后单击上的任何其他可点击项目整个页面，并有它的点击处理程序成功地火？

[再次编辑：]

基于斯帕克的演示，我有线了一个警告，表明在模糊输入以下。因此，在行动中看到的问题，启动此琴：https://jsfiddle.net/bd1fhpu3/

然后点击进入输入字段的一前点击“只是一个按钮”。点击上条子“只是一个按钮”，以确保警示标志已经被推出来光标的热点的鼠标按钮的释放。

无论如何，这只是说明是什么问题。解决这可能不是问题的范围之内了，但它似乎值得分享的情况下，任何人遇到此。要解决，我要么需要重写Bootbox的单击事件是一个鼠标按下事件，而不是一个点击（那么你并不需要按下和释放），或者我可以“创可贴”（TM）通过避免搬迁的解决方案按钮。也许一个静态的高度对话框的身高足以容纳形式和任何可能的警告。当然有些的“黑客”喜欢这样，因为你永远不知道，如果你打算做其他的事情以后，使这一问题再次出现。但它会是一个快速简便的临时补丁。

javascript jquery jquery-validate bootbox
2个回答
0
投票

你不能使用内置的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
});

然而，这将引发整个形式验证。如果你只是想在其上触发一个领域失去焦点的验证，那么你又回到了起点，因为事件只知道焦点消失，不到哪里去。

0
投票

只是为了后人，这里是一个“答案”，如它。也许这将帮助别人有一天;你永远都不会知道。

这里是正在运行“错误地”，因此没有一个真正的修复，也没有代码示例提供任何代码。这里是发生了什么事：

  1. 用户处于聚焦在字段
  2. 用户按下鼠标按钮（但释放动作还没有发生）
  3. 模糊事件触发，这会导致形状误差的警告出现下面的字段。这也不得不按下“取消”按钮时，屏幕的Y轴的净效应
  4. 用户释放鼠标按键，这通常会完成“点击”处理程序。

然而，在＃4，因为“取消”按钮，光标下不再绑定到该按钮的Click事件侦听器不火。

演示中，只要它生活在互联网上，将在下面留言。然而，提供了代码示例去与它是没有意义的。当演示死了，我会删除评论。

可能的步骤（解决方法/黑客），我选择不迄今奉行：

  1. 修改对话框，这样当鼠标按下事件触发，意思是“点击”事件被成功完成按钮不动
  2. 提供替代了按钮上的单击事件鼠标按下事件的自定义代码。然而，这会导致相当普遍的UI公约的损失
  3. 强制用户按ESC取消，而不是点击一个按钮
  4. [通过注释信贷天向T.一个可能的选项，如果你可以在错误信息使用一些自定义样式，是隐藏他们visibility: none而非display: none。前者将隐藏文本，但仍保留了文本，后者没有（因此为什么你的模式正在扩大）的垂直空间。这从事件的内容活动期间可能移位保持按钮。你会风与多余的空格，但你可以通过取消对表单组的下边缘敲一些了这一关（假设你使用它）

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.