Главная страница » jQuery » Создание простой анимированной формы входа

Создание простой анимированной формы входа

На сайтах не раз замечал формы входа которые содержали ошибки и не имели возможности проверить правильности заполнения полей, или возвращение на обратную страницу из-за неправильности заполнения. По этому в данном уроке я расскажу как создать простую и в то же время уникальную форму входа для вашего сайта при помощи jQuery, и так, посмотрим что у нас с этого получится…

И так, наша форма входа будет иметь приблизительно такой вид:

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Данный прием на самом деле совсем несложный. Пользователь нажимает на кнопку »Я все заполнил правильно», программа производит проверку и все незаполненные поля ‘’дрожат’’. Для начала нам нужна структура формы входа, выглядеть она будет так:

<ul>

<li>

<p>

</li>

<li>

<h3>Email</h3>

<p>

</li>

<li>

<h3>Пароль</h3>

<p>

</li>

<li>

<h3>Еще раз паролик</h3>

<p>

</li>

<li>

<p>

</li>

</ul>

Следующим этапом будет оживление нашей формы входа при помощи анимации: пользователь нажимает на кнопку »Я все заполнил правильно», и jQuery анализирует все поля для ввода данных. И если хотя бы одно из полей не заполнено, то к этому полю применяется анимация.

$("#signup").click(function() {

var emptyfields = $("input[value=]");

if (emptyfields.size() > 0) {

emptyfields.each(function() {

// здесь анимация

});

}

});

Теперь нам надо, чтобы каждое незаполненное поле сдвигалось на 10 пикселей влево, затем на 10 пикселей вправо, и данный эффект повторялся два раза, после чего текстовое поле должно вернуться в исходное положение.

$("#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: "0px" }, 100)

.addClass("required");

});

}

});

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