当表单被validation时，如何滚动到第一个错误而不是跳转？

我已经看到了许多关于这个主题的变化的问题，但我正在寻找简单的解决scheme：

HTML表单，jQueryvalidation，需要多个字段。 当表单提交时，validation跳转到第一个错误并突出显示。 为了增加可用性，我想滚动到第一个错误字段。 但它不断吹捧validation或抛出scrollTo错误。

我需要使用标准的validation插件（http://docs.jquery.com/Plugins/Validation），但任何滚动将罚款，我一直在尝试scrollTo（http://flesler.blogspot.com/2007/ 10 / jqueryscrollto.html）。

示例代码在http://jsfiddle.net/DtgKQ/1/ ，任何帮助表示赞赏。

Answer 1

以下是你可以做的事情：

• 默认情况下，validate插件会关注第一个错误的元素（如果有的话）。 通过将选项设置为false来closures选项focusInvalid 。

• 表单无效时，执行callbackinvalidHandler处理程序。 您可以通过第二个参数validator访问validator器对象，从而访问errorList数组。 然后，您可以相对于第一个错误的元素对滚动进行animation处理。

代码如下：

 $("#commentForm").validate({ focusInvalid: false, invalidHandler: function(form, validator) { if (!validator.numberOfInvalids()) return; $('html, body').animate({ scrollTop: $(validator.errorList[0].element).offset().top }, 2000); } }); 

DEMO

Answer 2

我不喜欢所有的jQuery扩展，所以这里是我对这个问题的解决scheme：

 if ($('#MYID').valid()) { //dosomething(); } else { $('html, body').animate({ scrollTop: ($('.error').offset().top - 300) }, 2000); } 

Answer 3

只需将此代码添加到您的主题javascript：

 (function($) { $(document).ready(function(){ //bmo scroll to not valid $(".wpcf7").on('invalid.wpcf7',function(e){ $('html, body').animate({ scrollTop: $(".wpcf7-not-valid").first().offset().top-30 }, 2000); }); }); })(jQuery); 

Answer 4

也许你可以检查什么input失败，并把它的位置（顶部），并使用jQuery的scrollTop

 $(window).scrollTop(errorPosition) 

看来，获取每个错误字段不是很容易得到（至less对我来说）。

在Validation插件文档中searcherrorPlacement 。 有一个示例如何获取每个错误字段。