Question

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

Answer 1

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

$("#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插件。

Answer 2

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

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

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

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

$。scrollTo（'＃yourlabelID'，“slow”）;

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

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

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

jquery验证插件和滚动

2 个答案: