Yii2. Как прокрутить страницу к первому полю с ошибкой после валидации?

Главная  >>  Backend  >>  Yii2. Как прокрутить страницу к первому полю с ошибкой после валидации?

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

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

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

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

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

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

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