使用jQuery和ScrollTo滚动到页面上的第一个错误消息

如果您的大页面或表单使用验证,那么您可能想告诉用户发生了什么事。一种实现方法是,在页面顶部告诉用户出了点问题,然后让他们找出问题出在哪里。

一个更优雅的解决方案是将页面向下滚动到第一条错误消息的正上方,以便用户知道他们需要填写什么。这可以通过结合使用jQuery和ScrollTo插件轻松完成。

您在表单上需要做的第一件事是添加一些标签作为错误输出元素。如果没有错误,请确保不会打印这些标签。我选择对错误类别使用p标签。下载此插件,并将其包含在您的页面中。

There was a problem with this element.

现在所需要做的就是告诉ScrollTo我们要滚动到屏幕上的第一条错误消息。我们可以通过使用过滤器“ p.error:1 ”来执行此操作,该过滤器将在页面上找到第一个带有错误类的p标签。您也可以使用“ :first ”过滤器代替它,但是两者的结果相同。

这将通过以下方式传递给ScrollTo插件。

$.scrollTo($('p.error:1'));

这里的一个小问题是,它向下滚动页面,以便此元素与页面顶部齐平,如果错误在元素上方,则是有道理的。如果错误在元素下方,则需要进行设置和偏移,以便页面顶部和错误消息之间有足够的空间以适合表单元素。这是通过使用offset选项和负号来完成的像这样的价值。

$.scrollTo($('p.error:1'), {offset: {top:-200}});

这样做的好处是,您可以轻松地将其添加到任何表单中,除非有带有错误类的段落标签,否则它不会起作用。