如何让jQuery Tools验证在覆盖对话框中工作？

我有一个简单的文本输入对话框，使用jQT叠加 - 单击一个链接，叠加打开窗体，填写表单，点击提交，并处理表单。我现在试图向表单添加验证，但验证从未发生过。如果我禁用链接上的覆盖并让窗体在一个单独的窗口中打开，验证工作正常，所以我相对确定我已经正确设置了基本验证内容。这个无覆盖版本实际上是http://flowplayer.org/tools/demos/validator/index.html中发生的事情 - 包含表单的页面被加载，验证被设置，并且验证代码在表单提交上运行。如何让jQuery Tools验证在覆盖对话框中工作？

覆盖版本的问题，我认为是验证没有得到正确设置，很可能是因为表单没有找到。覆盖表单直到点击链接才会存在，因此对validator（）的调用不能位于包含链接的主页面中。我已经尝试将包含validator（）调用的SCRIPT标记添加到表单代码的末尾，但它不起作用。在构建覆盖表单的jQuery代码中，也不会从validator（）调用适当的ID。在所有情况下，我都没有看到控制台中显示任何javascript错误。 Arggh。我认为这是jQT表单和验证的常用用法，但我只是无法弄清楚这里发生了什么（或者不在这里）。有什么建议？谢谢！

来源

2011-01-06 Jim Miller

尝试此处使用的方法：http://stackoverflow.com/questions/4515269/4530234#4530234 – ifaour 2011-01-06 02:11:38

你应该能够只需轻按到覆盖中onLoad事件：

$("#dialog").overlay({ 
    load: true, 
    onLoad: function() { 
     $("#form").validator(); 
    }, 
    onBeforeClose: function() { 
     $("#form").data("validator").reset(); 
    } 
});

编辑：新增onBeforeClose处理程序表单验证在关闭覆盖复位。

此外，请确保z-index CSS属性的错误是以上覆盖的z-index。

但是，我不确定为什么你不能将覆盖设置代码之外的电话拨打validator()。

叠加形式不存在，直到链接被点击，所以调用验证（）不能在主页包含链接

这不是非常正确：如果你使用FireBug检查你的HTML，你会发现叠加元素只是隐藏起来，并且会显示出来，并且CSS会被应用到div上，使它看起来像一个模态对话框。 form应该始终存在于DOM中。

退房工作的例子在这里：http://jsfiddle.net/andrewwhitaker/SYPSG/

来源

2011-01-06 02:18:23

这看起来很接近 - 我还有几件事在我的结尾那不是，但它看起来很有希望。更多后... – 2011-01-06 02:41:28

@Jim：很高兴听到。随意发布任何您遇到特定问题的HTML/JS。 – 2011-01-06 02:48:27

@Andrew - 就像我说的，非常接近。我遇到的唯一问题，也存在于您的示例中，如果您未能正确填写表单，显示错误div，然后通过单击页面背景（或关闭）取消表单小部件在我的形式），形式消失，但错误的div仍然可见。有什么想法吗？ – 2011-01-06 04:58:32

如何让jQuery Tools验证在覆盖对话框中工作？

回答

相关问题