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

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

您可以执行以下操作：

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

• 当表单无效时，执行回调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

对于使用 HTML5 验证 + Vanilla JavaScript 的任何人：

不是这个问题的直接答案，但由于这是搜索这个问题时出现的主要帖子，我想我会在这里为任何也在寻找的人发布我的解决方案！

我在我的 ReactJS 项目中使用了它，但它也应该可以在使用现代浏览器的任何普通 ES6 JavaScript 设置中工作。

function scrollToInvalid(form) {
  const invalidInputs = Array.from(form.querySelectorAll(':invalid, .is-invalid [, .custom-invalid-selector]'));    // set up so you can use any custom invalid classes you're adding to your elements, as well
  invalidInputs.sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);                      // sort inputs by offset from top of viewport (handles issues with multi-column layouts, where the first element in the markup isn't necessarily the highest on the page)
  invalidInputs[0].scrollIntoView({ block: 'center', behavior: 'smooth' });                                         // scroll first (top) input into center of view, using smooth animation
}

function handleSubmit(e) {
  const form = e.currentTarget;

  if (form.checkValidity() === false ) {
    // form is invalid, don't submit
    e.preventDefault();
    e.stopPropagation();
    // scroll first invalid input into view
    scrollToInvalid(form);
  }
  else {
    // form is valid, handle submit...
  }
}

<form onSubmit="handleSubmit">
  ...
</form>

Answer 4

只需将此代码添加到您的主题 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 5

也许你可以检查什么输入失败并获取它的位置（顶部）并使用 jQuery 的 scrollTop

$(window).scrollTop(errorPosition)

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

在验证插件文档中搜索errorPlacement。有一个如何获取每个错误字段的示例。

Answer 6

你可以尝试下面使用纯javascript

setTimeout(function () {
            document
                .querySelector(".field-validation-error")
                .scrollIntoView({ behavior: "smooth", block: "center" });
        }, 0);

Answer 7

试试这个：

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

Answer 8

**Get the classname of input - get this div topoffset - move to this div**
beforeSubmit = function(){

setTimeout(scrollInput, 1000);
   
function scrollInput() {
   alert('hello');
    var list = document.getElementById("cpa-form").getElementsByClassName("has-error");
    if (list && list.length > 0) {
        var gimno = list[0].className;
        
        
        var classes = gimno.split(' ');
        
        var class2 = classes[1];
        
        console.log(class2);
        
        var topme = $('.'+ class2).offset().top;
        
        
        $('html, body').animate({scrollTop: '+='+topme+'px'}, 800);
        
    }
}

Answer 9

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