Jquery 验证表单时，如何滚动到第一个错误而不是跳转？

我见过很多关于这个主题的不同问题，但我正在寻找简单的解决方案：

HTML表单，jQuery验证，需要多个字段。提交表单时，验证跳转到第一个错误并突出显示它。为了提高可用性，我想滚动到第一个错误字段。但它一直在完全破坏验证，或者导致错误

我需要使用标准的验证插件(http://docs.jquery.com/Plugins/Validation)但是任何滚动条都可以，尽管我一直在尝试使用滚动条(http://flesler.blogspot.com/2007/10/jqueryscrollto.html)

---

示例代码位于，非常感谢您的帮助。

也许您可以检查哪些输入失败，并确定其位置（顶部）并使用jQuery的

似乎获取每个错误字段并不容易（至少对我来说）

---

在中搜索

errorPlacement

。下面是如何获取每个错误字段的示例。

以下是您可以执行的操作：

• 默认情况下，验证插件聚焦第一个错误元素（如果有）。通过将选项设置为

  false

  关闭

  focusInvalid

• 当表单无效时，将执行回调

  invalidHandler

  处理程序。您可以通过第二个参数

  validator

  访问validator对象，从而访问errorList数组。然后，可以相对于第一个错误元素设置滚动动画

代码如下：

$("#commentForm").validate({
    focusInvalid: false,
    invalidHandler: function(form, validator) {

        if (!validator.numberOfInvalids())
            return;

        $('html, body').animate({
            scrollTop: $(validator.errorList[0].element).offset().top
        }, 2000);

    }
});

---

我不喜欢所有的jQuery扩展，因此下面是我对这个问题的解决方案：

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

---

只需将以下代码添加到您的主题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);

试试这个：

$( "input[type=submit]" ).click(function() {
    event.preventDefault();
    event.stopPropagation();
    //  console.log("test")
    var errorElements = document.querySelectorAll(".input-validation-error");
  for (let index = 0; index < errorElements.length; index++) {
      const element = errorElements[index];
    //  console.log(element);
      $('html, body').animate({
        scrollTop: $(errorElements[0]).focus().offset().top - 25
      }, 1000);      
      return false;
  }
});

$（“输入[type=submit]”）。单击（函数（）{
event.preventDefault（）；
event.stopPropagation（）；
//控制台日志（“测试”）
var errorElements=document.querySelectorAll（“.input validation error”）；
for（让index=0；index

算出：'$（validator.errorList[0].element）.offset（）.top-20'酷！我还建议添加$（validator.errorList[0].element）.focus（）；因此，该字段将在动画之后聚焦。最好在动画之后将其添加到2000之后的匿名函数中。如果无效元素已经可见，也可以跳过向上滚动。如果元素在viewport@MikeCauser$（…）中，则可以跳过滚动。valid不是函数（…）（jQuery版本2.2.1）@blackhatmario它是jQuery验证插件的一部分

  $("#create-form").validate({ // Set Focus on first invalid input
    focusInvalid: false,
    invalidHandler: function() {
      $(this).find(":input.error:first").focus();
      }
  });

$( "input[type=submit]" ).click(function() {
    event.preventDefault();
    event.stopPropagation();
    //  console.log("test")
    var errorElements = document.querySelectorAll(".input-validation-error");
  for (let index = 0; index < errorElements.length; index++) {
      const element = errorElements[index];
    //  console.log(element);
      $('html, body').animate({
        scrollTop: $(errorElements[0]).focus().offset().top - 25
      }, 1000);      
      return false;
  }
});