HTML-формы

/*
Объявляем переменную для формы. В этот момент мы не можем связать ее с объектом, поскольку документ еще не до конца загружен
*/
var oForm = null;
/*
Объявляем функцию, которая будет вызываться при попытке 
отправить данные на сервер (пользователь нажал кнопку submit)
*/
function Validate() {
    // Очищаем результаты предыдущей проверки
    //Функция ClearErrors определена ниже
    ClearErrors();
    var result = true; // результат проверки формы
    // Находим элемент, в который будут записываться ошибки
    var oErrors = document.getElementById('errors');
    // и очищаем его содержимое
    oErrors.innerHTML = '';

    //Проверяем Имя пользователя
    if (!oForm.username.value) {// В поле username ничего не введено
        // проверка не прошла
        result = false;
        //добавляем описание ошибки
        oErrors.innerHTML += '<li>Введите имя пользователя</li>';
        // помечаем элемент
        oForm.username.style.borderColor = 'red';
        //поместить фокус ввода в поле ввода и выделить все содержимое
        oForm.username.select();
    } // в противном случае не делать ничего

    //Проверяем пароль
    if (!oForm.pwd.value) {
        oErrors.innerHTML += '<li>Введите пароль</li>';
        oForm.pwd.style.borderColor = 'red';
        if (result) {// элемент с ошибкой не был до этого найден
            oForm.pwd.select();
        }
        result = false;
    }
    // Проверяем совпадение введенных паролей
    // Поле подтверждения пароля не имеет атрибута name,
    // поэтому мы не можем получить его через oForm.pwd1
    // Используем поиск в документе по атрибуту id
    var oPwd1 = document.getElementById('pwd1');
    if (!oPwd1.value) {// поле пусто
        oErrors.innerHTML += '<li>Подтвердите пароль</li>';
        oPwd1.style.borderColor = 'red';
        if (result) {
            oPwd1.select();
        }
        result = false;
    }
    else // поле не пусто
        if (oPwd1.value != oForm.pwd.value) {// пароли не совпадают
        oErrors.innerHTML += '<li>Пароли должны совпадать</li>';
        oPwd1.style.borderColor = 'red';
        if (result) {
            oPwd1.select();
        }
        result = false;
    }
    // Группа переключателей представляет собой массив элементов.
    // Мы должны проверить каждый
    var genderSelected = false;
    for (var i = 0, n = oForm.gender.length; i < n; i++) {
        if (oForm.gender[i].checked) {// найден выбранный элемент
            genderSelected = true;
            // нет необходимости продолжать
            break;// выход из цикла
        }
    }
    if (!genderSelected) {// ни один из переключателей не выбран
        oErrors.innerHTML += '<li>Укажите пол</li>';
        if (result) {
            // элемент input type=radio не имеет метода select()
            // помещаем фокус ввода в первый элемент группы
            oForm.gender[0].focus();
        }
        result = false;
    }
    if (!oForm.agree.checked) {
        oErrors.innerHTML += '<li>Вы должны согласиться с условиями</li>';
        if (result) {
            // элемент input type=checkbox не имеет метода select()
            // помещаем фокус ввода в этот элемент
            oForm.agree.focus();
        }
        result = false;
    }
    // Проверка закончена. 
    // Если result == false, отправка данных отменяется
    return result;
}// function Validate

//вспомогательная функция очистки формы
function ClearErrors() {
    // Находим элемент, в который записываются ошибки
    var oErrors = document.getElementById('errors');
    // и очищаем его содержимое
    oErrors.innerHTML = '';
    oForm.username.style.borderColor = '';
    oForm.pwd.style.borderColor = '';
    document.getElementById('pwd1').style.borderColor = '';
}

// Функция, которая автоматически вызывается
// по окончании загрузки документа в окно браузера
window.onload = function() {
    // документ загружен, и мы можем найти внем форму.
    oForm = document.forms[0];

    // Событие onkeyup происходит, когда пользователь
    // отпускает клавишу в поле текстового ввода
    oForm.username.onkeyup =
    oForm.pwd.onkeyup =
    document.getElementById('pwd1').onkeyup =
    function() {// футкция обрабатывает событие любого из трех элементов
        // this является ссылкой на элемент, который вызвал событие
        // id вспомогательных элементов сделаны так, чтобы легко вычислись
        // из имени элемента-источника события
        //если атрибут name отсутствует или пуст, 
        //будет использован id (this.name || this.id)
        var elem = document.getElementById('span' + (this.name || this.id));
        elem.innerHTML = this.value.length + ' из ' + this.maxLength;
        elem.style.display = 'inline';
    }; // onkeyup

    // Событие onblur происходит, когда элемент теряет фокус ввода
    oForm.username.onblur =
    oForm.pwd.onblur =
    document.getElementById('pwd1').onblur =
    function() {
        var elem = document.getElementById('span' + (this.name || this.id));
        // Скрываем вспомогательный элемент
        elem.style.display = '';
    }; // onblur

    // Событие onreset происходит, когда пользователь
    // нажимает кнопку Reset (Очистить форму)
    oForm.onreset = function() {
        // Производим дополнительную очистку. 
        // Содержимое полей очищается автоматически
        ClearErrors();
        oForm.username.focus();
    }; // onreset

    // активируем ввод в поле Имя пользователя
    oForm.username.focus();
}      // window.onload