Анимационная проверка форм с помощью jQuery
20 сентября 2009 года, Размещено в категории: jQuery / MooTools
Трюк очень прост: После того как пользователь заполняя форму, случайно не заполнит одну из форм и нажмет на кнопку Отправить, не заполненные формы станут другого цвета и будут трястись. Я думаю что так формы станут более наглядным для не внимательных пользователей. Посмотрите демо и вы сами все поймете.
Шаг 1: HTML код
Структура нашей формы, выглядит вот так, вообще простенькая форма.
-
Ваше имя:
-
Email:
-
Пароль:
-
Пароль подтверждение:
-
Логин
Вот как эта все работает: когда пользователь нажимает кнопку отправить, JQuery получите все пустые поля с формы. Если есть хотя бы одно пустое поле ввода, анимация будет применяться к этому полю.
$("#signup").click(function() { var emptyfields = $("input[value=]"); if (emptyfields.size() > 0) {emptyfields.each(function() { // animation goes here});}} );
Давайте посмотрим, как создать простую анимацию. Мы хотим двигать каждой областю, 10px налево, затем 10px вправо, повторим это еще раз, и установите их обратно к исходным позициям.
$("#signup").click(function() { var emptyfields = $("input[value=]"); if (emptyfields.size() > 0) { emptyfields.each(function() { $(this).stop() .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) .animate({ left: "0px" }, 100) .addClass("required"); });} });
Кажись ничего не забыл, если есть вопросы пишем в комментарии.
Мой блог находят по следующим фразам
• wmaid.com explore dicim.net
• бесплатный проигрыватель для сайта html
• mp3 pleyer dlya wp
• Биржи с посуточной оплатой за ссылки
• вертикальный раскрывающийся список
• плеер для сайта
Ballmer
13 лет назад
А проверка правильности обеих паролей?
13 лет назад
Он не проверяет на верность заполнения полей, он проверяет не оставил ли пользователь пустым поле при заполнении.
Ballmer
13 лет назад
я как бы в курсе, но нужно еще и совпадение пароля проверять.
czart
11 лет назад
этот урок можно использовать не только для входа!!! Так что про пароли забудьте….