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

【问题标题】：jquery-validation-engine scroll to first errorjquery-validation-engine 滚动到第一个错误
【发布时间】：2014-04-16 20:55:32
【问题描述】：

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

我有三个屏幕截图来更好地解释我的意思。我不能自己发布图片，所以发布了图片的链接。

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);

【问题讨论】：

我无法在上面发布，所以在这里发布：Figure 3: After submitting form, manually scrolled to first error

标签： jquery-validation-engine

【解决方案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;

可能有更好的解决方法，这可能不适用于所有情况，但它适用于我的某些情况。它仍然有点偏离，但现在看起来没有那么糟糕了。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我不知道是否要求结束，但在我看来，您添加的验证很糟糕。我的意思是展示的地方。尝试更改 css 样式，特别是如果您看到验证集“位置：绝对”，如果它确实发生了变化。检查页面中元素的位置。看看你的验证器是什么页面元素。 $ (你的Vali)。父母（）。我希望这会有所帮助。

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

【讨论】：

谢谢。问题是它滚动不正确。这实际上是唯一的问题。它确实滚动了第一个错误，但第一个错误在顶部的横幅内。不明白的看我的3张图。
另外，post you mention above 引用了一个稍微不同的验证插件。我正在使用jquery-validation-engine plugin。它可能基于帖子提到的插件，但略有不同。对我来说，使用我的代码更容易实现。
更多说明：它总是滚动到浏览器窗口的顶部。因此，如果页面碰巧设计为顶部横幅不移动，底部横幅移动/滚动，那么滚动就会出现问题，如我的图片所示。

【解决方案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 插件的所有用途，但它适用于我的情况。如果其他人有更好的想法，请告诉我。

【讨论】：

【解决方案5】：

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

【讨论】：