• блог
• вопросы и ответы
• рецензии
• реклама на сайте
• RSS каналы
  3363 подписчика
• наш твиттер
  396 фолловеров

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

27 мая 2009, 14:00 Евгений Белодед HTML и CSS рейтинг 52

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

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

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

К делу.

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();//скрыли, даже если залогинить не удалось
    }
}

Смотрим Загружаем

Такие вот мелочи отличают плохое от хорошего. Спасибо всем читателям. Тем, кто критикует и тем кто благодарит.

Бис фрайтаг, майне либе.

PS. Кто-нибудь вставил в свой проект подобную форму?

Автор статьи: Евгений Белодед

Понаписал еще 33 статьи.

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

• Адрес электронной почты
•