0

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.

cloned
  • 6,346
  • 4
  • 26
  • 38
xela84
  • 262
  • 2
  • 10
  • Add a focus handler to those fields maybe, that calls `window.scrollBy` to scroll the page down a bit further …? – 04FS Oct 07 '19 at 11:26

3 Answers3

1

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

Foxlab
  • 564
  • 3
  • 9
  • Thank you for the code. Looks like what I need. We are using Polymer Web Components rather than jQuery. But I can rewrite your code to vanilla JavaScript. Furthermore I only need this for keyboard navigation and not for click events with the mouse. I will try. – xela84 Oct 08 '19 at 07:47
  • You're welcome. Note that the focus event fire also when you use the tab key to navigate. – Foxlab Oct 08 '19 at 08:10
1

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/

Josh
  • 3,872
  • 1
  • 12
  • 13
  • Thank you for the link. In our application, we are using labels for the input elements but we are not explicitly specifying the relationships of the error message. Thank your for the information. – xela84 Oct 08 '19 at 07:42
  • We are using the Vaadin Framework for our application. I saw that Vaadin is not using the `for`attribute for the label but the ARIA `aria-labelledby`attribute on the input element. For the error message, they are not using any explicitly specifying relationship. – xela84 Oct 08 '19 at 07:59
0

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.

xela84
  • 262
  • 2
  • 10