Прокрутите до сообщения об ошибке в элементе формы при использовании клавиши табуляции для навигации по страницам.

Question

У меня есть форма с несколькими элементами ввода. Некоторые из элементов ввода имеют сообщение об ошибке под входом.

Когда я использую клавишу табуляции для навигации по страницам, веб-сайт прокручивается до выделенного элемента ввода. Когда в фокусированном элементе ввода появляется сообщение об ошибке, я не вижу сообщения под элементом ввода, потому что страница прокручивается только до сфокусированного ввода. Мне нужно немного прокрутить страницу вниз, чтобы пользователь мог увидеть сообщение об ошибке.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control">
    </div>
    <div class="col">
      <input type="text" class="form-control">
    </div>
  </div>
   <div class="row">
    <div class="col">
      <input type="text" class="form-control">
    </div>
    <div class="col">
      <input type="text" class="form-control">
    </div>
  </div>
   <div class="row">
    <div class="col">
      <input type="text" class="form-control">
    </div>
    <div class="col">
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control">
    </div>
    <div class="col">
      <input type="text" class="form-control">
    </div>
  </div>
   <div class="row">
    <div class="col">
      <input type="text" class="form-control is-invalid">
       <div class="invalid-feedback">
          Error Text.
        </div>
    </div>
    <div class="col">
      <input type="text" class="form-control is-invalid">
       <div class="invalid-feedback">
          Error Text.
        </div>
    </div>
  </div>
</form>

Используйте клавишу табуляции для навигации по формам ввода. Когда вы фокусируете последние вводы сообщениями об ошибках, вы не можете видеть текст ошибки под полями ввода.

Answer 1

Чаще всего встроенные сообщения проверки ставятся выше или справа от ввода, а не под ним. Это решит вашу проблему с прокруткой и сделает сообщение об ошибке более заметным.

Когда дело доходит до веб-доступности, простые решения часто работают лучше, чем сложные.

Я также заметил, что вы нене используете элементы меток или явно не определяете отношения между вашими сообщениями об ошибках и вашими элементами ввода. Любая причина, почему?

Я включил ссылку (ниже), которая описывает некоторые очень полезные методы для связи сообщений об ошибках с соответствующими элементами ввода.

https://developer.paciellogroup.com/blog/2016/01/simple-inline-error-message-pattern/

Answer 2

Предполагая, что у вас установлен jquery (не тонкий, потому что animate не определен в версии slim), вам просто нужно изменить смещение по высоте (line_height), так как вам нужно прокрутить дальше, чем фокусированный элемент.

$("input").focus(function() {
    var error_input = $(this);
    if(error_input.hasClass("is-invalid")){
      var line_height = $(".invalid-feedback").height();

      //FIXME
      console.log(error_input.offset().top + line_height);

      $('html, body').animate({
        scrollTop: error_input.offset().top + line_height
      }, 600);   
    }
});

Вот это: скрипка

Answer 3

Я хотел бы поделиться своим решением этой проблемы. Теперь я использую решение из этого поста: При необходимости перейдите к просмотру

Вот код из моего Polymer Web Component:

_onFocus(e) {           
   const scrollWrapper = document.querySelector('.i-flex-content-scroll-container');
   this._scrollIfNeeded(this, scrollWrapper);
}

_scrollIfNeeded(element, container) {
   if (element.offsetTop < container.scrollTop) {
      container.scrollTop = element.offsetTop;
   } else {
      const offsetBottom = element.offsetTop + element.offsetHeight;
      const scrollBottom = container.scrollTop + container.offsetHeight;
   if (offsetBottom > scrollBottom) {
      container.scrollTop = offsetBottom - container.offsetHeight;
   }
  }
}

Теперь это толькосвитки при необходимости.