Задача 1. Шаг третий. Решение

(Скачать решение)

Код валидации validation.js:

window.onload = initPage; 

function initPage() {
  document.getElementById("field_login").onblur = requestValidation; 
  document.getElementById("field_password").onblur = checkRegistrationAllowed; 
  document.getElementById("field_name").onblur = checkRegistrationAllowed; 
  document.getElementById("field_surname").onblur = checkRegistrationAllowed; 
 
  isLoginOK = (document.getElementById("field_login").value != "");  
  checkRegistrationAllowed(); 
}

function requestValidation() {
  if (document.getElementById("field_login").value == '') return; 
  isLoginOK = false;
  checkRegistrationAllowed(); 
  request = createRequest(); 
  if (request == null) {
    alert("Unable to create request!"); 
  }
  else {
    document.getElementById("field_login").className = "processing"; 
    request.onreadystatechange = handleValidationResponse;
    var userName = escape(document.getElementById("field_login").value); 
    var url = "checkLogin.php?field_login=" + userName;
    request.open("GET", url, true); 
    request.send(null);
  }
}

function handleValidationResponse() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      if (request.responseText == "ok") {
        document.getElementById("label_login").className = ""; 
        document.getElementById("field_login").className = "approved"; 
        isLoginOK = true; 
        checkRegistrationAllowed(); 
      }
      else {
        document.getElementById("label_login").className = "highlighted"; 
        document.getElementById("field_login").className = "denied"; 
      }
    }
  }
}

function checkRegistrationAllowed() {
  isPassOK = (document.getElementById("field_password").value != "");
  isNameOK = (document.getElementById("field_name").value != "");
  isSurnameOK = (document.getElementById("field_surname").value != "");  
  
  if (isLoginOK && isPassOK && isNameOK && isSurnameOK) {
    document.getElementById("register").disabled = false; 
  }
  else {
    document.getElementById("register").disabled = true; 
  }
}

Код сервера checkLogin.php:

<?php

$takenLogins = array ('andrew', 'alena');

sleep(2);

if (!in_array( $_REQUEST['field_login'], $takenLogins )) {
 echo 'ok';
} else {
 echo 'bad';
}

?>

И код описания стилей (default.css) выглядит так:

label {
  float: left; 
  text-align: right; 
  width: 100px; 
  margin-right: 10px; 
}

input[type=submit] {
  margin-left: 110px; 
}

input[type=text] {
  width: 150px; 
  height: 14px; 
}

li {
  list-style: none;
  margin-top: 5px; 
}

.highlighted {
  color: red; 
}

#field_login {
  background: #fff url('../images/status.gif') 130px 0 no-repeat; 
}
#field_login.processing {
  background-position: 134px -19px; 
}
#field_login.approved {
  background-position: 134px -35px; 
}
#field_login.denied {
  background-color: #FF8282;  
  background-position: 134px -52px; 
}

Задача 1. Шаг третий. Применение AJAX'a для проверки логина

Наконец-то переходим к самому интересному - в этой части задачи нужно применить технологию AJAX.

Задача: сделать асинхронную проверку логина, вводимого пользователем. Проверка не проходит, если логин равняется любому из имен: alena, andrew. Статус проверки отображается в правом углу поля. Всего выделяются 4 статуса: пустое поле, проверка в процессе, проверка прошла успешно, проверка не прошла. Картинки для всех статусов находятся в исходных файлах к заданию.
Общее описание шагов работы приложения:
1) Пользователь ввел логин в поле логина и перешел к вводу других данных.
2) Посылается запрос к серверу на проверку введенного логина.
3) Сервер проверяет введенный логин на равенство 'alena' или 'andrew' и при равенстве возвращает статус bad. Иначе ok. Также сервер делает 2-х секундную задержку (имитация выполнения длительной операции).
4) Клиентская часть получает ответ от сервера и отображает соответствующую иконку статуса в поле ввода логина.
5) Кнопка регистрации изначально отключена. Она активируется только когда все поля заполнены и логин прошел проверку.

Исходные данные
С предыдущих задач:
1. HTML-страница с формой регистрации.
2. CSS для страницы регистрации.
3. PHP скрипт, принимающий данные с заполненной формы.

Новые
4. Картинка gif с изображениями статуса валидации.
(Скачать исходные файлы)


Результирующие файлы
1. Файл с клиентским JavaScript кодом.
2. Файл с серверным PHP кодом. 

Задача 1. Шаг второй. (Решение)

default.css дополнится всего одной подстройкой:

.highlighted {
  color: red; 
}

Код сервера у меня получился таким (register.php):

<!DOCTYPE html> 
<html>
  <head>
    <title>Registration form</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/default.css" />
  </head>
  <body>
  <?php

  $success = true; 
  $name_class = ''; 
  if (empty($_REQUEST['field_name'])) {
    $name_class = 'class="highlighted"';
    $success = false; 
  }
  $surname_class = ''; 
  if (empty($_REQUEST['field_surname'])) {
    $surname_class = 'class="highlighted"'; 
    $success = false; 
  }
  $login_class = ''; 
  if (empty($_REQUEST['field_login'])) {
    $login_class = 'class="highlighted"'; 
    $success = false; 
  }
  $password_class = ''; 
  if (empty($_REQUEST['field_password'])) {
    $password_class = 'class="highlighted"'; 
    $success = false; 
  }

  if ($success) {
?>
  <p>Регистрация прошла успешно!</p>
  <?php } else { ?>  
    <form action="/register.php" method="POST">
    <ul>
    <li><label for="field_name" <?php echo $name_class; ?> >Имя</label>
    <input id="field_name" type="text" name="field_name" value="<?php echo $_REQUEST['field_name']; ?>"></input></li>
    <li><label for="field_surname" <?php echo $surname_class; ?> >Фамилия</label>
    <input id="field_surname" type="text" name="field_surname" value="<?php echo $_REQUEST['field_surname']; ?>"></input></li>
    <li><label for="field_login" <?php echo $login_class; ?>>Логин</label>
    <input id="field_login" type="text" name="field_login" value="<?php echo $_REQUEST['field_login']; ?>"></input></li>
    <li><label for="field_password" <?php echo $password_class; ?> >Пароль</label>
    <input id="field_password" type="password" name="field_password" value ="<?php echo $_REQUEST['field_password']; ?>"></input> </li>
    <li><input id="register" type="submit" value="Регистрация"></input></li>
    </ul>
    </form>
    
  <?php } ?>
  
  </body>
</html>

Задача 1. Шаг второй. Написание кода сервера.

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

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

Предполагаемые результирующие файлы:
1-2) Дополненные файлы с шага 1.
3) register.php

Задача 1. Шаг первый. (Решение)

Код registration.html:

<!DOCTYPE html> 
<html>
  <head>
    <title>Форма регистрации</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/default.css" />
  </head>
  <body>
    <form action="/register.php" method="POST">
    <ul>
    <li><label for="field_name">Имя</label>
    <input id="field_name" type="text" name="field_name"></input></li>
    <li><label for="field_surname">Фамилия</label>
    <input id="field_surname" type="text" name="field_surname"></input></li>
    <li><label for="field_login">Логин</label>
    <input id="field_login" type="text" name="field_login"></input></li>
    <li><label for="field_password">Пароль</label>
    <input id="field_password" type="password" name="field_password"></input> </li>
    <li><input type="submit" value="Регистрация"></input></li>
    </ul>
    </form>
  </body>
</html>

Код css/default.css:

label {
  float: left; 
  text-align: right; 
  width: 100px; 
  margin-right: 10px; 
}

input[type=submit] {
  margin-left: 110px; 
}

li {
  list-style: none;
  margin-top: 5px; 
}

Вот что получилось:

Задача 1. Шаг первый. Создание макета формы регистрации (HTML/CSS)

Задача 1: Сделать форму регистрации с поддержкой асинхронных проверок.

Шаг первый: Заготовить простую форму.
Поля формы: 
1) Имя
2) Фамилия
3) Логин
4) Пароль

Кнопка: 
1) Регистрация.

Предполагаемые результирующие файлы:
1) registration.html
2) default.css

Освоение AJAX на практике. Что здесь будет

В двух словах опишу что будет из себя представлять этот проект. Сразу отмечу, что делается он почти исключительно для себя. По крайней мере на ближайшее время. На будущее будет видно, так как есть хорошая задумка.

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

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

Пока что все задачи будут посвящены AJAX'y, и всему, что с ним связано: Javascript с фреймворками, XHTML, CSS. В качестве серверного скриптового языка - PHP.