Задача 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; 
}