6

I have a long form with submit button at the bottom of the form. I have multiple input fields in the form marked with required attribute. So when one of the first few input fields are left blank and I scroll down to click submit, the error "Please fill out this field" came out correctly for the first error on top of the browser. However, I have to scroll up all the way to the top to enter the input. How can I make it automatically scroll up to focus on the first input error?

Tony Vu
  • 4,011
  • 2
  • 28
  • 36
  • http://stackoverflow.com/questions/6677035/jquery-scroll-to-element here is good explanation i hope it will help you – The Reason May 18 '15 at 09:59
  • I have tested the case in chrome, firefox, and opera, but the behavior that your are mentioning is not there. It is normally focusing to the required field one by one giving the message. Note: I tested it on ie v8, there the problem is nether focusing nor giving the message. but im sure it will be working on latest ie versions. – PHJCJO May 18 '15 at 10:09
  • @PHJCJO, you are right. The browser made an effort to scroll up to the first error input. However, in my case, the first input box is blocked by the fixed navigation header, so it is not visible. So I guess I can rephrase my question to how can I find the first invalid form field with javascript/jQuery when error occurs. – Tony Vu May 18 '15 at 10:29
  • If the first input box is invisible, why do you use it as required? – PHJCJO May 18 '15 at 10:32
  • 1
    No, you misunderstood me. What I mean is that when the browser scrolls up, the first input field is hidden under a bar (If I scroll further up, I will see it). So it is still not what I want. – Tony Vu May 18 '15 at 11:19

3 Answers3

4

There's a simple way to do it with jQuery.

$('html, body').animate({
    scrollTop: $("#target-element").offset().top
}, 1000);

If you don't want animation, use .scrollTop() instead:

$('html, body').scrollTop($("#target-element").offset().top);

Source: http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

If you're opposed to jQuery, you could roll your own solution by using window.scrollTo()

ohaal
  • 5,050
  • 2
  • 31
  • 48
2

Please avoid the animate function as it take time to focus on element but the balloon came first so the best way to do it like this.

function scrollToInvalid(form) {
var navbar = $('.nav-wrapper');

// listen for `invalid` events on all form inputs
form.find(':input').on('invalid', function(event) {
    var input = $(this)

    // the first invalid element in the form
    var first = form.find(':invalid').first()

    // only handle if this is the first invalid input
    if (input[0] === first[0]) {
        // height of the nav bar plus some padding
        var navbarHeight = navbar.height() + 50

        // the position to scroll to (accounting for the navbar)
        var elementOffset = input.offset().top - navbarHeight

        // the current scroll position (accounting for the navbar)
        var pageOffset = window.pageYOffset - navbarHeight

        // don't scroll if the element is already in view
        if (elementOffset > pageOffset && elementOffset < pageOffset + window.innerHeight) {
            return true
        }

        // note: avoid using animate, as it prevents the validation message displaying correctly
        $('html,body').scrollTop(elementOffset)
    }
});
}
// call it like this
var form = $('#contact-form')   //your form element
scrollToInvalid(form);
Mohsin Ali
  • 21
  • 1
  • very well-written answer. I used this exact code in my final solution after only slight modification to match our internal code style. – qxotk Feb 25 '20 at 18:33
-4

You would add an <a> element near (before, or after) the form element. When a validation problem occurs you would follow the link adjacent to the form element.

If you give an <a> element a name like;

<a name="anchor"></a>

you can then go to that position via;

<a href="#anchor"></a>
glend
  • 1,208
  • 1
  • 10
  • 23
  • `a` elements have no `name` attribute in html5. See http://stackoverflow.com/a/484781/1255033 – Mave May 18 '15 at 10:04