jquery – 当窗体验证时,如何滚动到第一个错误而不是跳转?

前端之家收集整理的这篇文章主要介绍了jquery – 当窗体验证时,如何滚动到第一个错误而不是跳转?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我看过很多关于这个主题的变化的问题,但我正在寻找直接的解决方案:

HTML表单,jQuery验证,需要多个字段。当表单提交时,验证跳转到第一个错误并突出显示。为了增加可用性,我想滚动到第一个错误字段。但它仍然完全鼓励验证或抛出scrollTo错误

我需要使用标准验证插件(http://docs.jquery.com/Plugins/Validation),但任何滚动将是好的,我曾经试过scrollTo(http://flesler.blogspot.com/2007/ 10 / jqueryscrollto.html)。

示例代码是在http://jsfiddle.net/DtgKQ/1/,任何帮助是赞赏。

解决方法

以下是您可以执行的操作:

>默认情况下,validate插件聚焦第一个错误的元素(如果有的话)。通过将选项focusInvalid设置为false来关闭该选项。
>回调invalidHandler处理程序在窗体无效时执行。您可以通过第二个参数验证器访问验证器对象,从而访问errorList数组。然后,您可以相对于第一个错误元素使滚动动画。

这里是代码

$("#commentForm").validate({
    focusInvalid: false,invalidHandler: function(form,validator) {

        if (!validator.numberOfInvalids())
            return;

        $('html,body').animate({
            scrollTop: $(validator.errorList[0].element).offset().top
        },2000);

    }
});

DEMO

原文链接:https://www.f2er.com/jquery/184367.html

猜你在找的jQuery相关文章