CODEWITHSUNDEEP
javascripthtmlcssaccessibility
xela84
xela84

Reputation: 312

Scroll to error message on form element when using tab key for page navigation

I have a form with multiple input elements. Some of the input elements have an error message below the input.

When I use the tab key for page navigation, the website scrolls to the focused input element. When the focused input element has an error message, I can`t see the message below the input element, because the page scrolls only to the focused input. I need to scroll the page down a little bit, so the user can see the error message.

.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>

Use the tab key to navigate throu the form inputs. When you focus the last inputs with the error messages, you can`t see the error text below the input fields.

Upvotes: 0

Views: 1582

Answers (3)

xela84
xela84

Reputation: 312

I wanted to share my solution to this problem. Now, I use the solution from this post: Scroll into view if needed

Here is the code from my 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;
   }
  }
}

Now, it only scrolls if needed.

Upvotes: 0

Josh
Josh

Reputation: 4332

It's more common to put inline validation messages above, or to the right of the input, rather than below it. This would solve your scrolling issue and make the error message more visible.

When it comes to web accessibility, simple solutions often work better than complex ones.

I've also noticed that you aren't using label elements or explicitly specifying the relationships between your error messages and your input elements. Any reason why?

I'm including a link (below) that outlines some very useful techniques for associating error messages with the respective input elements.

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

Upvotes: 1

Foxlab
Foxlab

Reputation: 942

Assuming you have jquery installed (not slim, because animate is not defined in the slim version), you just have to modify height offset (line_height) as you need to scroll further than the focused element.

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

Here is the : fiddle

Upvotes: 1

Related Questions