jquery验证插件和滚动答案

【问题标题】：jquery validation plug-in and scrollingjquery验证插件和滚动
【发布时间】：2009-08-04 12:54:36
【问题描述】：

我正在使用 jquery 验证插件。当有无效字段时，它会关注第一个无效字段。但是，我的标签在我的字段之上，我想向上滚动一点，以便用户可以看到标签和字段。我查看了 scrollTo 插件，但还没有找到一种简单的方法来集成它。也许有人以前做过这样的事情？

【问题讨论】：

你能告诉我们你是如何滚动到现在的吗？你说它向输入字段滚动，所以已经有一些滚动。
@sander 将焦点设置为屏幕外的内容将强制浏览器滚动至少足够远以看到焦点元素。不过，这可能取决于浏览器实现
我正在使用 jquery validate 插件。实际上，它专注于第一个无效元素。如果该元素不在屏幕上，它确实会滚动到该元素（输入字段），但不会更高。它不滚动，它只是非常快速地跳转到该字段。如果有卷轴，那就太快了，无法察觉。

标签： jquery validation scroll

【解决方案1】：

我遇到了类似的问题。我将验证错误显示在表单上方的有序列表中，而不是内联显示。当 jQuery 验证插件发现错误时，我将表单设置为滚动到表单顶部，通过编辑 invalidHandler 函数并禁用 focusInvalid 选项来通知用户该错误。

$("#residential-evaluation").validate({
 // Scroll to top of #errors on validate
 invalidHandler: function(form, validator){
  $.scrollTo('#errors', "slow");
 },
 focusInvalid:false,
 //Error output
 errorLabelContainer: "#errors",
 wrapper: "li"
});

这篇文章也很有用：

overriding a function within the jquery validation plugin

此设置依赖于添加动画的 scrollTo 插件。

【讨论】：

如果您在使用 IE 和 scrollTo 时遇到问题，可以尝试使用 window.location.hash="errors";
scrollTo 设置刚刚在 IE8 和 7 中进行了测试，似乎工作正常，包括动画。

【解决方案2】：

好的，所以你使用焦点跳转到验证失败的元素。

您可以删除该代码，因为您将尝试实现向该元素滚动。

需要执行这些步骤才能滚动到正确的元素。

在您的脑海中添加 scrollTo 插件。
确保标签已准备就绪（带有 ID 或类或其他内容）（在您的情况下是目标，因为您要滚动到标签的位置而不是输入字段）
如果你现在这样做：

$.scrollTo('#yourlabelID', "slow");

它将滚动到您的标签位置。

与常规滚动一样，如果元素离页面底部太近，它只会滚动到页面底部，不会再滚动。

演示：http://sander.netcentric.be/test/scroll.html

【讨论】：

我实现了这个。在 jquery-validate.js 中，就在它关注第一个无效元素之前，我将 scrollTo 放到该元素的标签上。它在 Firefox 中运行良好，但在 IE 中不行。我认为这是scrollTo和IE的问题。
我创建的示例似乎在我的计算机上的 IE 和 firefox 中都可以使用，所以我想 validateplugin 和 scrollTo 组合一定有一些东西。