jQuery это один из популярных и мощных JavaScript фреймворков для манипуляции DOM-элементами на странице. С ним можно буквально за пару минут добавить красивую анимацию или эффекты к уже существующим страницам. Так, в одной из предыдущих статей уже рассматривалось создание небольшого плагина для валидации произвольных форм. Данный плагин достаточно удобно использовать на небольших формах, где все поля помещаются на экране страницы. Однако, если форма состоит из нескольких блоков и занимает несколько экранов, то может возникнуть одна проблема - необходимость в прокрутке формы и поиске поля с ошибками.
Представьте себе, что вы заполнили несколько блоков с десятками полей, которые занимают два или более экрана. Дошли до кнопки "Отправить" в самом низу и нажали ее, но ничего не происходит или выдается сообщение с ошибкой "поле не заполнено". Обычно, в таком случае, вы просто будете прокручивать страницу в поисках поля с ошибкой. Но, это только часть проблемы. Если же ошибки было, к примеру, две, то, вероятнее всего, вы будете прокручивать экран аж 4 раза. Происходит это примерно следующим образом. Первый раз вы прокрутите до первой попавшейся ошибки. Исправите ее. Второй раз вы прокрутите экран снова к кнопке отправить. Третий раз вам придется прокручивать страницу до ошибки, которая была в самом начале формы. Четвертый раз вы снова будете крутить колесико до кнопки "Отправить". И только тогда форма пройдет валидацию.
Однако, это проблему легко решить, добавив к валидации небольшую анимацию и автоматическую прокрутку формы. Это как раз один из тех примеров проблем, которые кажутся небольшими, но которые на практике отнимают у пользователей, включая вас, достаточно много времени. Кстати, если вам интересно узнать больше об некоторых особенностях CSS и js, то найти ряд интересных статей и дополнительную информацию вы можете тут (учтите, что на сайте есть как бесплатные, так и платные уроки и статьи; тем не менее, в бесплатных статьях есть масса полезных хитростей).
Добавим подсветку и прокрутку экрана к валидации полей на jQuery
Первым делом, скачайте и распакуйте архив с тестовым проектом из статьи про валидацию (ссылка на архив с проектом в конце статьи). В проекте понадобится исправить всего лишь два файла это index.html и template.css. Однако, в статье изменения будут приводится только для index.html, так как в CSS добавились лишь косметические стили, не особо влияющие на результат.
Примечание: Если вам хочется увидеть уже готовый результат, то архив с проектом находится в конце статьи.
Шаг первый. Подключим две библиотеки в узле head в index.html. jQuery UI для того, чтобы можно было использовать css-свойство "background-color" в анимации. И scrollTo для того, чтобы можно было прокручивать страницу до необходимого блока.
Шаг второй. Оставим только форму с ручной валидацией и обернем поля в контейнер, который будет представлять собой блок формы. В последующем именно эти блоки и будем подсвечивать. Для наглядности советуем продублировать блоки десяток раз.
Вы должны увидеть, что полей стало много и форма теперь занимает не один экран и что кнопка "Отправить" находится в самом низу.
Шаг третий. Добавим в скрипт валидации формы в "index.html" код подсветки и прокручивания, который будет вызываться в случае обнаружения ошибок на форме.
$(function () {
// Ручная валидация, доступная в любой момент
$('.form-2 .save-button').on('click', function () {
if(window.validation.isValid({ container: '.form-2' })) {
alert('Валидация второй формы прошла успешно!');
}
// Если в форме есть ошибки, то запускаем анимацию
else {
// Находим блок с ошибкой
var errorBlock = $('.form-2').find('.input-error:first').parent().parent();
// Перемещаем страницу к блоку
$.scrollTo(errorBlock, 700, {
// Задаем смещение вверх,
// чтобы граница блока не оказалась в самом верху окна браузера
offset: {
top: -20
},
// Как только перемещение закончено, запускаем анимацию подкраски
onAfter:function () {
// Подкрашиваем блок на полсекунду и снова убираем цвет
errorBlock.animate({ backgroundColor: 'rgb(240, 131, 131)' }, 500, "linear", function () {
errorBlock.animate({ backgroundColor: 'white' }, 500, "linear");
});
}
});
}
});
});
Теперь, если в форме есть ошибки, то вначале страница прокрутится до самого первого блока с ошибкой, а затем данный блок подсветится красным цветом на секунду, тем самым показывая пользователю тот блок, где необходимо исправить ошибки. Преимущество такого подхода заключается в том, что если ошибки были в нескольких блоках, то начиная исправлять ошибки с первого блока формы, пользователь будет постепенно спускаться вниз и исправлять оставшиеся, при условии, что вы их выделили бросающимися в глаза стилями. И, как следствие, с большой вероятностью, пользователю понадобится всего один проход для исправления ошибок.
Как видите, буквально за 5-10 минут форма стала более легкой и удобной в использовании.
Теперь, вы знаете как быстро и просто добавить немного полезной анимации на jQuery к своим страницам.
Ссылка для скачивания готового проекта находится тут:
