select2 滚动到错误不适用于 jquery 验证和 asp.net mvc答案

【问题标题】：select2 scroll to error not working with jquery validation and asp.net mvcselect2 滚动到错误不适用于 jquery 验证和 asp.net mvc
【发布时间】：2013-09-17 16:25:06
【问题描述】：

在这里发布以防其他人遇到同样的问题...

在 C# MVC4 站点中使用 select2 下拉菜单时，验证失败时页面不会滚动到正确位置。这样的验证和错误滚动也适用于其他控件，但不适用于select2。 AFAICS 的原因是select2 用它自己的标记替换了原始的select，然后将原始选择设置为display:none。 jquery.validate 然后没有有效的目标可以滚动到。

我们正在使用 twitter bootstrap 进行样式设置，但我认为它对这个问题没有任何影响。

【问题讨论】：

是的，jQuery Validate 插件默认会忽略隐藏元素。解决方法是简单地将ignore 选项设置为[]，从而禁用此默认行为。见：stackoverflow.com/a/8565769/594235
是的，但隐藏的元素仍然不是我们想要滚动到的元素

标签： asp.net-mvc-4 twitter-bootstrap jquery-validate unobtrusive-validation jquery-select2

【解决方案1】：

jquery.validate 文档（以及 StackOverflow 上的许多答案）建议您使用 $.validator.setDefaults 来分配 invalidHandler，但我无法让它在 asp.net 中工作（它确实适用于focusInvalid 然而），可能是由于我们使用了 MS 不显眼的库。相反，我在我的 jquery 就绪处理程序中使用了这段代码：

    $(function() {
        $.validator.setDefaults({         
            focusInvalid: false
        });

        function scrollToError(error, validator) {
            var elem = $(validator.errorList[0].element);
            if (elem.length) {
                if (elem.is(':visible'))
                    return elem.offset().top - 16;
                elem = elem.prev($(".select2-container"));
                if (elem.length) {
                    return elem.offset().top - 16;
                }
            }
            return 0; // scroll to top if all else fails
        }

        $('form').bind('invalid-form.validate', function(error, validator) {
            // fix scrolling and validation for select2

            if (!validator.numberOfInvalids())
                return;

            $('html, body').animate({
                scrollTop: scrollToError(error, validator)
            }, 500);
        });
...

我将focusInvalid 设置为 false 以禁用并避免与标准滚动和焦点行为发生冲突。

bind() 调用代替了 invalidHandler 选项，与 validate 插件使用的相同。

scrollToError() 选择第一个无效元素并返回要滚动到的位置，正常的可见元素或具有“select2-container”类的前一个项目（即 select2 元素）或页面顶部，如果所有其他方法都失败了.

标准行为（显示验证错误等）仍然像以前一样工作。

希望这对某人有所帮助，如果您有更好的解决方案，我会非常有兴趣了解它。

【讨论】：