0

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

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

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

4

1 回答 1

3

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 元素），或者如果其他所有方法都失败，则返回页面顶部。

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

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

于 2013-09-17T16:25:06.740 回答