使用jquery validate插件滚动到特定错误 [英] Scroll to particular error with jquery validate plugin

问题描述

我在这里找到了有关如何处理错误和滚动的很好参考(

I found a good reference here for how to handle errors and scroll (How to fire an event on error in jquery validator plugin), but I don't understand how to scroll to a particular error. Lets say I had 20 elements that errors could occur on and your on a mobile device, right now if there is an error I can scroll to the top, but that might not be where the error is!

我禁用了focusInvalid，因为它以一种引人入胜的方式在移动设备上打开了键盘，并且始终无法滚动到该元素.

I disabled focusInvalid because that brought up the keyboard on mobile in an obtrusive way and did not scroll to the element anyways.

是否可以使用插件或任何自定义代码来做到这一点?

Is there a way to do this with the plugin or any custom code?

这是我目前无效的处理程序.

This is my invalid handler right now.

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

推荐答案

滚动到该错误不属于此插件.您必须将内置回调函数之一与您自己的动画代码配合使用...

Scrolling to the error is not part of this plugin. You'll have to use one of the built-in callback functions with your own animation code...

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

• invalidHandler does not give you access to the individual error messages. It simply fires when you click the submit button on an invalid form. Therefore, you cannot use this option to scroll to individual fields.

showErrors将使您可以访问各个错误消息和元素.但是，由于所有未解决的错误都在此处立即列出，因此您必须弄清楚要滚动到的位置.下面的代码将滚动到错误的第一个元素(表格上的最高位).

showErrors will give you access to the individual error messages and elements. However, you'll have to figure out which one you want to scroll to since all of the pending errors are listed here at once. Code below will scroll to first element with an error (highest on the form).

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/

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

这篇关于使用jquery validate插件滚动到特定错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！