Элемент Fieldset

В дополнение к описанному набору элементов, HTML_формы могут включать те_ ги <fieldset> и <label>, которые могут играть важную роль для веб_дизайнеров, но с точки зрения клиентского JavaScript_программирования они не представ_ ляют большого интереса. Вам следует знать о теге <fieldset> просто потому, что при размещении такого тега в форме в массив elements[] добавляется соответст_ вующий ему объект. (Однако этого не происходит при размещении тега <label>.)

В отличие от всех других объектов из массива elements[], объект, представляю_ щий тег <fieldset>, не имеет свойства value, что может вызывать проблемы в про_ граммном коде, который предполагает наличие такого свойства.

Пример верификации формы

Мы завершим обсуждение форм расширенным примером, демонстрирующим порядок использования ненавязчивого JavaScript_кода для верификации фор_ мы.¹ Модуль программного JavaScript_кода из примера 18.3, который будет представлен чуть позже, позволяет выполнять автоматическую проверку на сто_ роне клиента. Чтобы воспользоваться этим модулем, достаточно просто подклю_ чить его к HTML_странице, определить CSS_стили для выделения полей, содер_ жащих некорректную информацию, и добавить дополнительные атрибуты к эле_ ментам формы. Чтобы сделать поле обязательным к заполнению, достаточно просто добавить к нему атрибут required. Чтобы выполнить проверку правильно_ сти с помощью регулярного выражения, следует добавить атрибут pattern и при_ своить ему текст регулярного выражения. Пример 18.2 демонстрирует исполь_ зование этого модуля, а на рис. 18.2 показано, что произойдет при попытке от_ править некорректные данные формы.

Пример 18.2. Добавление модуля проверки в HTML'форму

<script src="Validate.js"></script> <!__ подключить модуль проверки __> <style>

/*

* Модуль Validate.js требует, чтобы были определены стили класса "invalid"

* для отображения полей с некорректными данными, давая тем самым

* пользователю отличать их визуально.

* Для полей с корректными данными можно также определить необязательные стили.

*/

input.invalid { background: #faa; } /* Красноватый фон для полей с ошибками */ input.valid { background: #afa; } /* Зеленоватый фон для полей, */

/* заполненных правильно */

¹ Следует отметить, что проверка правильности заполнения полей формы на сторо_ не клиента очень удобна для пользователей: это позволяет обнаружить и испра_ вить ошибки еще до того, как форма будет отправлена на сервер. Однако наличие программного кода, выполняющего верификацию на стороне клиента, не гаран_ тирует, что на сервер всегда будут отправляться корректные данные, потому что некоторые пользователи отключают режим исполнения JavaScript_кода в своих броузерах. Кроме того, проверка правильности на стороне клиента не представля_ ет серьезной защиты от злонамеренного пользователя. По этим причинам провер_ ка на стороне клиента никогда не сможет заменить проверку на стороне сервера.

468 Глава 18. Формы и элементы форм

Рис. 18.2. Форма, не прошедшая проверку

</style>

<!__

Теперь, чтобы включить проверку полей формы, нужно просто установить атрибут required или pattern.

__> <form>

<!__ Это поле должно быть заполнено __>

Имя: <input type="text" name="name" required><br> <!__

\s* _ означает необязательный пробел.

\w+ _ один или более алфавитно_цифровых символов

__>

Электронная почта: <input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$"><br> <!__ \d{6} означает, что должно быть введено ровно шесть цифр __>

Почтовый индекс: <input type="text" name="zip" pattern="^\s*\d{6}\s*$"><br> <!__ следующее поле не проверяется __>

Непроверяемое поле: <input type="text"><br> <input type="submit">

</form>

Пример 18.3 содержит программный код модуля верификации формы. Обратите внимание: при подключении этого модуля к HTML_файлу в глобальное простран_ ство имен не добавляется ни одного имени, кроме того, модуль автоматически ре_ гистрирует обработчик события onload, который выполняет обход всех форм до_ кумента, отыскивает атрибуты required и pattern и в случае необходимости добав_ ляет обработчики событий onchange и onsubmit. Эти обработчики устанавливают значение свойства className каждого элемента формы, который подвергается про_ верке, в значение "invalid" или "valid", потому необходимо предусмотреть опре_ деление хотя бы для «неправильного» (invalid) CSS_класса,¹ чтобы обеспечить ви_ зуальное отличие полей с корректными и некорректными данными.

¹ Ко времени написания этих строк существующее средство автоматического за_ полнения полей панели инструментов Google использует CSS_стили для установ_ ки цвета фона некоторых текстовых полей. Расширение для броузеров, выпущен_ ное компанией Google, делает светло_желтым цвет фона для полей, куда автома_ тически могут быть подставлены значения.

Пример 18.3. Автоматическая проверка формы

/**

* Validate.js: ненавязчивая проверка HTML_форм.

*

* После загрузки документа данный модуль сканирует документ в поисках

* HTML_форм и текстовых полей в формах. Если обнаруживаются элементы

* с атрибутом "required" или "pattern", к ним добавляются соответствующие

* обработчики событий, выполняющие проверку данных формы.

*

* Если элемент формы имеет атрибут "pattern", значение этого атрибута

* используется как регулярное JavaScript_выражение, а элементу назначается

* обработчик события onchange, который проверяет ввод пользователя с помощью

* этого шаблона. Если данные не соответствуют шаблону, цвет фона элемента

* ввода изменяется, чтобы привлечь внимание пользователя.

* По умолчанию текстовое поле должно содержать некоторую подстроку, которая

* соответствует шаблону. Если требуется указать более строгое соответствие,

* используйте якорные элементы ^ и $ в начале и конце шаблона.

*

* Элемент формы с атрибутом "required" должен содержать какое_либо значение.

* Если быть более точным, атрибут "required" является краткой формой атрибута

* pattern="\S". То есть этот атрибут требует, чтобы поле содержало хотя бы

* один символ, отличный от пробела

*

* Если элемент формы прошел проверку, в атрибут "class" этого элемента

* записывается значение "valid". В противном случае _ значение "invalid".

* Чтобы извлечь из этого модуля выгоду, необходимо вместе с ним использовать

* таблицу CSS_стилей, где определяются стили для "неправильного" класса.

* Например:

*

* <!__ для привлечения внимания окрасить фон элементов формы, содержащих

* ошибки, в оранжевый цвет __>

* <style>input.invalid { background: #fa0; }</style>

*

* Перед отправкой формы текстовые поля, требующие проверки, подвергаются

* повторной верификации. Если обнаруживаются ошибки, отправка формы

* блокируется и выводится диалоговое окно, в котором пользователю сообщается

* о том, что форма заполнена не полностью или содержит ошибки.

*

* Этот модуль не может использоваться для проверки форм или полей, в которых

* вы определили собственный обработчик событий onchange или onsubmit,

* а также полей, для которых вы определили свое значение атрибута class.

*

* Весь программный код модуля размещается внутри анонимной функции

* и не определяет ни одного имени в глобальном пространстве имен.

*/

(function() { // Все, что требуется, выполняется в этой анонимной функции // По окончании загрузки документа вызвать функцию init()

if (window.addEventListener) window.addEventListener("load", init, false); else if (window.attachEvent) window.attachEvent("onload", init);

// Устанавливает обработчики событий для форм и элементов форм,

// где это необходимо.

function init() {

// Предположить, что форма не требует проверки var needsValidation = false;

// Цикл по всем элементам на форме

for(j = 0; j < f.elements.length; j++) {

var e = f.elements[j]; // Текущий элемент

// Интерес представляют только поля <input type="text"> if (e.type != "text") continue;

// Проверить, имеются ли атрибуты, требующие проверки var pattern = e.getAttribute("pattern");

// Можно было бы использовать e.hasAttribute(),

// но IE не поддерживает его.

var required = e.getAttribute("required") != null;

// Атрибут required _ это лишь краткая форма записи

// атрибута pattern

if (required && !pattern) { pattern = "\\S";

e.setAttribute("pattern", pattern);

}

// Если элемент требует проверки, if (pattern) {

// проверять при каждом изменении содержимого элемента e.onchange = validateOnChange;

// Запомнить, чтобы потом добавить обработчик onsubmit needsValidation = true;

}

}

// Если хотя бы один элемент формы требует проверки,

// то необходимо установить обработчик события onsubmit формы if (needsValidation) f.onsubmit = validateOnSubmit;

}

}

// Эта функция _ обработчик события onchange для текстового поля, которое

// требует проверки. Не забывайте, что в функции init() мы преобразовали

// атрибут required в pattern.

// Если значение не соответствует шаблону, установить значение

// атрибута class равным "invalid".

if (value.search(pattern) == _1) textfield.className = "invalid"; else textfield.className = "valid";

}

// Эта функция _ обработчик события onsubmit для любой формы,

// требующей проверки.

function validateOnSubmit() {

// Перед отправкой формы выполнить проверку всех полей в форме

// и установить их свойства className в соответствующее значение.

// Если хотя бы одно из этих полей содержит ошибку, вывести диалоговое

// окно и заблокировать отправку данных формы.

var invalid = false; // Предполагаем, что все правильно

// Если элемент – это текстовое поле, для которого установлен

// наш обработчик события onchange

if (e.type == "text" && e.onchange == validateOnChange) { e.onchange( ); // Вызвать обработчик для повторной проверки

// Если проверка не пройдена, это означает, что

// вся форма не прошла проверку

if (e.className == "invalid") invalid = true;

}

}

// Если форма не прошла проверку, вывести диалоговое окно

// и заблокировать отправку формы

if (invalid) {

alert("Форма заполнена не полностью " +

"или были введены некорректные данные.\n" +

"Пожалуйста, проверьте правильность выделенных полей " + " и повторите попытку.");

return false;

}

}

})();