jquery - 使用 jquery 验证插件滚动到特定错误

Question

我在这里找到了关于如何处理错误和滚动的很好的引用( How to fire an event on error in jquery validator plugin )，但我不明白如何滚动到特定错误。假设我有 20 个可能在移动设备上发生错误的元素，现在如果出现错误我可以滚动到顶部，但这可能不是错误所在!

我禁用了 focusInvalid，因为这会以一种干扰的方式在移动设备上弹出键盘，而且无论如何也不会滚动到该元素。

有没有办法使用插件或任何自定义代码来做到这一点？

这是我现在无效的处理程序。

invalidHandler: function(form, validator){
                $('html, body').animate({scrollTop: '0px'}, 300);
            },

Answer 1

滚动到错误不是此插件的一部分。您必须将内置回调函数之一与您自己的动画代码结合使用...

• invalidHandler 不允许您访问各个错误消息。当您单击无效表单上的提交按钮时，它就会触发。因此，您无法使用此选项滚动到各个字段。

• showErrors 将使您能够访问各个错误消息和元素。但是，您必须弄清楚要滚动到哪一个，因为所有待处理的错误都会立即列出在此处。下面的代码将滚动到第一个出现错误的元素(表单的最高位置)。

  showErrors: function (errorMap, errorList) {
        // errorList[0].element; // <- index "0" is the first element with an error
  
        if (typeof errorList[0] != "undefined") {
            var position = $(errorList[0].element).position().top;
            $('html, body').animate({
                scrollTop: position
            }, 300);
        }
        this.defaultShowErrors(); // keep error messages next to each input element   
  }
  

演示:http://jsfiddle.net/tvr6f9j1/1/