Проверка правильности заполнения форм

Проверка правильности заполнения (валидация) формы перед ее обработкой является необходимым и важным действием, которое большей частью выполняется на стороне клиента, т.е. браузером.

Контроль включает проверку заполнения обязательных полей и соответствие введенных данных требуемым форматам. Традиционно такая проверка предполагала использование Javascript или специальных средств на его основе. Например, для валидации форм имеется специальный плагин библиотеки jQuery.

Проверка правильности заполнения формы, выполняемая таким способом, предполагает выполнение однотипна для форм, встречающихся в разных веб-приложениях. Она требует от программиста каждый раз повторять почти без изменений одну и ту же простую, но объемную и рутинную работу (для этого есть специальный термин boilerplate code).

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

Спецификация HTML5 не диктует разработчикам браузеров никаких правил, особенно в том, что касается способов ввода и редактирования данных.

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

II. Контроль заполнения обязательных полей

а) Выполнение проверки с помощью Javascript/jQuery.

Традиционный способ контроля заполнения поля предполагает использование программного кода, с помощью которого происходит чтения и анализа содержания поля. С появлением библиотек типа jQuery эти действия стали проще, но все же требует программирования.

ЗАДАНИЕ 2 (Проверка заполнения обязательного поля средствами Javascript)

На страницу имеется форма с одним текстовым полем и кнопкой типа submit.

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

Если строка пустая, то выводится сообщение (alert) о том, что поле нужно заполнить.

Замечания

а) Пустая строка в условии оператора if в Javascript интерпретируется как false.

б) Для чтения значения поля формы можно применить команду jQuery val(), которая может применяться к элементам формы input,  select и textarea.

Для списка с возможностью выбора нескольких элементов <select multiple="multiple">, метод val() возвращает массив, содержащий отмеченные варианты. Если пользователем ничего не выбрано, то возвращается null.

б) Проверка заполнения обязательных полей средствами HTML 5.

В HTML5 с помощью разметки можно возложить контроль заполнения обязательного поля на браузер. Для этого в теге элемента обязательного поля достаточно указать атрибут required:

<input type="text" required>

Проверка заполнения поля — это только одна часть процедуры, которую выполняют браузеры. Вторая — вывод предупреждающего сообщения, когда обязательное поле не заполнено.

Браузеры, поддерживающие атрибут required (все, кроме IE до версии 10, и Safari), при нажатии кнопки Submit начинают автоматически просматривать обязательные поля. Как только встретилось незаполненное, они выводят сообщение об этом. Содержание и оформление сообщения зависят от браузера. Например, в браузере Chrome это будет выглядеть так:

Браузерами Chrome, Firefox и Opera поддерживается стандартный способ задания текста предупреждения о пропущенном поле.

Для этого в теге элемента обязательного поля нужно задать обработку события "обязательное поле не заполнено". Для этого используется специальный атрибут oninvalid.

Текст предупреждающего сообщения задается в нем с помощью специального метода setCustomValidity:

oninvalid="this.setCustomValidity('Поле не может быть пустым')"

Атрибут oninvalid (вызов setCustomValidity) имеет более высокий приоритет, чем остальные атрибуты, которые могут влиять на содержание сообщения.

Замечание

В HTML4 атрибут title применяется для задания текста всплывающей подсказки. В формах при попадании мыши на поле ввода с таким атрибутом, будет появляться подсказка (tooltip).

Если задать этот атрибут в элементе обязательного поля, то браузере Chrome добавит текст из него в предупреждающее сообщение как дополнительную строку.

В Firefox аналогичная возможность реализуется с помощью нестандартного атрибута

x-moz-errormessage="User name is required to proceed."

В браузере Opera добавление текста к стандартному сообщению вообще не предусмотрено.