Анимационная проверка форм с помощью jQuery

20 сентября 2009 года, Размещено в категории: jQuery / MooTools

Анимационная проверка форм

Трюк очень прост: После того как пользователь заполняя форму, случайно не заполнит одну из форм и нажмет на кнопку Отправить, не заполненные формы станут другого цвета и будут трястись. Я думаю что так формы станут более наглядным для не внимательных пользователей. Посмотрите демо и вы сами все поймете.

скачатьdemo

Шаг 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
Биржи с посуточной оплатой за ссылки
вертикальный раскрывающийся список
плеер для сайта






4 комментария

  • 8 лет назад Ответить

    А проверка правильности обеих паролей?

  • 8 лет назад Ответить

    Он не проверяет на верность заполнения полей, он проверяет не оставил ли пользователь пустым поле при заполнении.

  • 8 лет назад Ответить

    я как бы в курсе, но нужно еще и совпадение пароля проверять.

  • 7 лет назад Ответить

    этот урок можно использовать не только для входа!!! Так что про пароли забудьте….

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: