Animated scroll to first error after form validate

[nkovacs]

updateInputs scrolls to the first visible input that has an error.
I'd like to do an animated scroll, but I can't because of this.

[disem]

Not sure about your validation options, we used afterValidate event to achieve this behavior with ajax validation, something like:

$('#form-id').on('afterValidate', function (event, messages) {
    if(typeof $('.has-error').first().offset() !== 'undefined') {
        $('html, body').animate({
            scrollTop: $('.has-error').first().offset().top
        }, 1000);
    }
});

[nkovacs]

Yes, but that doesn't work properly. The hardcoded jump causes the page to jump to the top, then in the next tick of jquery's animation it jumps back down and then it animates up. That initial jump is the problem.

[TimNZ]

Line 504 of yii.activeform.js has an error and scrolling doesn't work:

$(window).height => $(window).height()

                if (top < wtop || top > wtop + $(window).height) {
                    $(window).scrollTop(top);
                }

[nkovacs]

Thanks. I fixed it in my PR but the bug is in the original code.

[nkovacs]

The default code also doesn't take into account any fixed headers, so you'll end up with inputs partially under the header. The basic template's contact form exhibits this problem.