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   
}

DEMO：http://jsfiddle.net/tvr6f9j1/1/

使用jquery validate插件滚动到特定错误

1 个答案: