Question

我有一个页面，我们在顶部有一个固定横幅，然后在固定横幅下面有一个滚动部分。在这个滚动部分，我们有我们正在验证的表单。如果我在表单中较早的某个字段出现错误，则当前向上滚动到横幅（或者甚至可能在横幅上方），它不会正确滚动到第一个错误字段。如何解决此类问题？

我有三个屏幕截图可以更好地解释我的意思。我无法自己发布图片，因此发布了图片链接。

Figure 1: Before submitting form

Figure 2: After submitting form, bad scrolling. It goes to first error field, just not scrolled correctly

编辑（2014年4月18日）：我可以确认来自jquery.validationEngine.js的这段代码是不起作用的。基本上，无论我设置“目的地”，它仍然滚动到窗口的顶部，而不是容器的顶部所有这些东西都在。即使我强迫“目的地”是一些巨大的数字，它就像它忽略了它。这个jQuery插件应该以不同的方式做事吗？

    $("html, body").animate({
                scrollTop: destination
            }, 1100, function(){
                if(options.focusFirstField) first_err.focus();
            });
            $("html, body").animate({scrollLeft: fixleft},1100);

Answer 1

基于this post，我更改了jquery.validationEngine.js，如下所示：

旧版本（从here下载）：

_validateFields: function(form) {
                ...... // code removed for the sake of brevity, but enough include to show context.

    if (errorFound) {
        if (options.scroll) {
            var destination=first_err.offset().top; // This is at around line 371
            var fixleft = first_err.offset().left;

新版本：

_validateFields: function(form) {
                ...... // code removed for the sake of brevity, but enough include to show context.

    if (errorFound) {
        if (options.scroll) {
            var destination= form.scrollTop() + ( first_err.offset().top - form.position().top ) - (form.height()/2 ) + ( first_err.height()/2 ); // This is at around line 371
            var fixleft = first_err.offset().left;

可能有一个更好的解决方案，这可能不适用于所有情况，但它适用于我的一些情况。它仍然略有偏差，但现在看起来并不那么糟糕。

Answer 2

一种解决方案是使用scrollOffset选项。示例：

$("#form").validationEngine('attach',{autoHidePrompt:true,autoHideDelay: 1000,fadeDuration: 200,scrollOffset:200});

Answer 3

我不知道是否要求结束，但在我看来，你的补充验证不好。我的意思是展示的地方。尝试更改css样式，特别是如果您看到验证集＆＃34; position：absolute＆＃34;，如果它确实发生了变化。检查页面中元素的位置。查看页面元素是您的验证器。 $（yourVali）。 parent（）。我希望有所帮助。

关于滚动你有这个链接。应该有所帮助 When form is validated, how to SCROLL to the first error instead of jumping?

Answer 4

好的，我现在有一个更好的解决方案。在同一段代码中，我应用了以下更改：

_validateFields: function(form) {
                ...... // code removed for the sake of brevity, but enough include to show context.
    if (errorFound) {
        if (options.scroll) {
            var errorfld = first_err; // This is the first change, at around line 371 in the original code.
            var fixleft = first_err.offset().left;

            //prompt positioning adjustment support. Usage: positionType:Xshift,Yshift (for ex.: bottomLeft:+20 or bottomLeft:-20,+10)
            var positionType=options.promptPosition;
            if (typeof(positionType)=='string' && positionType.indexOf(":")!=-1)
                positionType=positionType.substring(0,positionType.indexOf(":"));

            if (positionType!="bottomRight" && positionType!="bottomLeft") {
                var prompt_err= methods._getPrompt(first_err);
                if (prompt_err) {
                    errorfld = prompt_err;
                }
            }

            var destination= form.scrollTop() + ( errorfld.offset().top - form.position().top ) + ( errorfld.height()/2 );

再一次，我不确定这是否适用于jquery.validationEngine.js插件的所有用途，但它适用于我的情况。如果其他人有更好的想法，请告诉我。

Answer 5

在jquery validationengine 2.6.2中，有一个名为scrollOffset的选项。您可以将其设置为等于横幅高度（或顶部任何固定位置元素的高度）的值。

jquery-validation-engine滚动到第一个错误

5 个答案: