Question

我已经看到很多关于这个主题的变化的问题，但我正在寻找直截了当的解决方案：

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

我需要使用标准验证插件（http://docs.jquery.com/Plugins/Validation），但任何滚动条都没问题，因为我一直在尝试使用scrollTo（http://flesler.blogspot.com /2007/10/jqueryscrollto.html）。

示例代码位于http://jsfiddle.net/DtgKQ/1/，我们非常感谢您的帮助。

Answer 1

以下是您可以做的事情：

默认情况下，验证插件会聚焦第一个错误元素（如果有的话）。关闭选项focusInvalid，将其设置为false。
当表单无效时，将执行回调invalidHandler处理程序。您可以通过第二个参数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);

    }
});

<强> DEMO

Answer 2

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

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

也许你可以查看哪些输入失败并取得它的位置（顶部）并使用jQuery的scrollTop

$(window).scrollTop(errorPosition)

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

在Validation plugin documentation中搜索errorPlacement。有一个示例如何获取每个错误字段。

Answer 5

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

Answer 6

尝试：

$( "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;
  }
});

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

6 个答案: