Улучшение форм авторизации, регистрации и напоминации

Гутен морген таг, майне либе фройнде. Пока писал, доброе утро превратилось в добрый следующий день )

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

В примере было немало косяков и несовершенств. На некоторые из них обратили внимание читатели, другие пришлось заметить самому.

К делу.

1. Доступность

Это был главный, на мой взгляд недостаток, который, в общем-то поправить было несложно. В чем суть: без js мы не могли увидеть другую форму, кроме той, которая показывается по умолчанию. Поэтому вместо "#" прописываем нормальные адреса страниц:

2. Код

Первое, что надо было поправить - ошибки оформить в массивы. Что и было сделано.
var er = [];
er[0] = "Неправильный формат email'a"; //0
er[1] = "Пароли не совпадают"; //0
er[2] = "Пользователь с таким email'ом уже зарегистрирован"; //0
er[3] = "Не угадали пароль. Или email. Попробуйте еще раз"; //1

Второе - сделать привязку событий на клики по псевдоссылкам более лаконичной. Для этого я убрал лишние классы из разметки и определял, что должно сработать ислодя из атрибута href ссылки:
$('.additional a').click(function(e) {
e.preventDefault();
var x;
switch ($(this).attr('href')) {
case ("signup.html"):
x = 0;
break;
case ("index.html"):
x = 1;
break;
case ("remind.html"):
x = 2;
break;
};
GoTo(x);
});
3. Фокусировка

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

Проблема решается простым указанием visibility: hidden для тех форм, которые сейчас не видны. На такие элементы формы фокус не переходит.

Таким образом при клике мы должны сделать блок, который сейчас приедет видимым:
$('.additional a').click(function(e) {
e.preventDefault();
var x;
switch ($(this).attr('href')) {
...
};
$(blocks[x]).css({ 'visibility': 'visible' }); //Эту строчку мы только что добавили
GoTo(x);
});

А уехавший блок надо скрыть:
var cur = 1;
function GoTo(num) {
margin = num * 382;
$('#wr').animate(
{ marginLeft: -margin }, 800, 'easeInOutBack', function() {
$(blocks[cur]).css({ 'visibility': 'hidden' });
cur = num;
});
}

Victor сделал разумное предложение: фокусировать на первом текстовом поле при переходе на другую форму. Предложение было весьма разумным. Реализуем.
function GoTo(num) {
margin = num * 382;
$('#wr').animate(
{ marginLeft: -margin }, 800, 'easeInOutBack', function() {
switch (num) {
case 0:
$('#email').focus();
break;
case 1:
$('#loginEmail').focus();
break;
case 2:
$('#remindEmail').focus();
break;
};
$(blocks[cur]).css({ 'visibility': 'hidden' });
cur = num;
});
}
4. Индикатор.

В форме не было индикатора загрузки. А без индикатора сейчас на приличные вечеринки уже не пускают. Генерируем его на аджакслоад.инфо и вставляем в уголочек.

Код увеличится на несколько функций: показ и скрытие индикатора, которые будут вызываться при вызове ajax-функций.
function ShowIndicator() {
$('#indicator').show();
}
function HideIndicator() {
$('#indicator').hide();
}

А в функцию авторизации вставляем в нужные места показ и скрытие индикатора:
function SignIn() {
pass = $('#loginPass').val();
email = $('#loginEmail').val();
ShowIndicator(); //показали
if ((email != "") && ( CheckPassword(email, pass))) {
//Sign User In
HideIndicator(); //скрыли
HideError();
} else {
ShowError(3);
HideIndicator();//скрыли, даже если залогинить не удалось
}
}