Очень удобная для пользователя фишка — прокрутка страницы к первому полю с ошибкой в случае неуспешной валидации. В этой статье я напишу, как можно просто прокрутить страницу к первой ошибке после валидации yii2.

Приведу пример с реального проекта:

    /**
     *  Прокрутка полсле неудачной валидации
     */
    $("#form").on("afterValidate", function (event, messages) {
        if(typeof $(".has-error").first().offset() !== "undefined") {
            $("html, body").animate({
                scrollTop: $(".has-error").first().offset().top - 85
            }, 1000);
        }
    });

Все предельно просто. Если после валидации есть поле с классом .has-error — мы прокручиваем страницу вверх к его положению.
Координаты узнаём при помощи .offset().top.

Прокрутку можно реализовать и при afterValidate (как в примере), и при beforeSubmit.

Также у меня в примере я отнимаю от положения 85 пикселей — т.к. прокрутка идет к позиции инпута, а не его заголовка — а после прокрутки человек должен видеть подпись поля, в котором ошибся. Чтобы не было «упертого» в верх страницы заголовка — советую брать это значение с небольшим запасом.

Также всегда можно навести красоту и в этом же методе добавить какую-то анимацию, например, пульсации, на поле, к которому мы прокрутили. Смотрится всегда очень красиво.

Надеюсь статья была Вам полезной. Всем добра, друзья!