Проверка формы на JavaScript
В этой статье мы начнём разбираться с более сложными и функционально-законченными скриптами. Пройдём по шагам через все стадии — начиная с постановки задачи и заканчивая универсальным скриптом, готовым к употреблению. И начнём с проверки формы перед отсылкой на сервер.
Общие соображения и html-код формы
Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо её вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна — проверить, что пользователь заполнил все нужные поля перед отправкой и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.
Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так:
Ваше имя: *
Электронный адрес: *
Тема сообщения:
Сообщение:
* — необходимые для заполнения поля
Заметьте, что в отличие от обычной формы непосредственно в теге мы отслеживаем событие onsubmit и при его наступлении вызываем функцию проверки формы sendform().
Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onclick? Ответ простой — при использовании события onclick кнопку «submit» придётся заменить обычной кнопкой. И, в случае, если в броузере отключена поддержка javascript, мы не сможем отправить форму (!). Отслеживание же события onsubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.
Будем считать, что необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес.
Если Вы внимательно присмотритесь к html-коду нашей формы, то заметите, что рядом с этими полями я поставил звёздочку, а в конце формы разместил сноску. Сделано это, разумеется, для удобства и элементарного уважения к пользователю.
Функция проверки формы перед отправкой
А теперь перейдём к главному — к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от неё требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых — отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.
Для начала напишем общую обвязку функции:
Применённый нами способ вызова функции через событие onsubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.
Теперь попробуем написать проверочную функцию, привязанную к данной конкретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое — это проверить содержимое каждого из обязательных полей на отсутствие текста:
if (document.forms[0].email.value == "") < alert('Пожалуйста, введите электронный адрес'); document.mailform.email.focus(); return false >return true; > //--> Как видите, функция проверки состоит из двух идентичных блоков, различающихся только именем проверяемого поля. Давайте прокомментируем каждую строчку в этих блоках:
сначала проверяем, что данное поле является пустым. И если это так, то
выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
выйдем из функции, установив флажок успешности выполнения в false.
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке.
Универсальная функция проверки
Если нам необходимо проверить всего два или три поля, то с таким методом проверки «по-одиночке» ещё можно смириться, но что, если их несколько десятков? А ведь такое не редкость — особенно в сложных анкетах. Поэтому мы немного модифицируем нашу функцию, чтобы она не зависела от количества проверяемых полей.
Первым делом мы создадим массив, где перечислим имена всех полей, которые требуют проверки:
required = new array(«name», «email»);
Такой подход позволит нам очень легко добавлять и модифицировать список обязательных полей без непосредственного изменения кода самой функции.
Дополнительно к вышеописанному массиву мы добавим ещё один, который будет содержать текст ошибки для конкретного поля:
required_show = new array(«Ваше имя», «электронный адрес»);
Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа «name не введён».
Имея массив обязательных для заполнения полей, всю проверку можно осуществлять в цикле. Вот как будет выглядеть модифицированная функция проверки:
В цикле происходит проверка всех полей формы на совпадение с «обязательными». В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом — введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля.
Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности — содержимое двух массивов) может быть адаптирована к любой форме.
Техники валидации форм
Это перевод статьи Ире Адеринокун — «Form validation techniques».
Ни для кого не секрет, что онлайн-формы могут стать серьёзным испытанием для пользователей. Особенно когда они выглядят как список полей для ввода без каких-либо подсказок. Однако мы, как разработчики, можем значительно облегчить жизнь посетителям наших сайтов.
Используем CSS
В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле), :invalid (невалидное), :required (обязательное) и :optional (необязательное). Их можно использовать, чтобы добавлять некоторые — хотя и весьма ограниченные — подсказки пользователям, заполняющим форму.
Используя :valid и :invalid , мы можем показать пользователю, правильно ли заполнено поле по мере ввода.
Однако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой. Поля, обязательные для заполнения, сразу подсветятся нам как :invalid , а необязательные — как :valid . Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.
Стилизация состояний :required и :optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами :valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.
Используем JavaScript
JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.
Number Input 1 Number Input 2 Number Input 3 Устанавливая атрибуты min , max и step , мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1 , 12 и 123 в три поля и отправит форму:
В результате всё, что получит пользователь — это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.
Добавляем несколько сообщений об ошибках в один тултип
Валидируя поля, браузер проверяет их по определённому списку потенциальных ошибок. В каждом поле содержится специальный объект validity , включающий в себя список булевых значений, характеризующих ту или иную проверку на валидность. Например, вот такой validity -объект будет у поля, когда пользователь введёт в него 1 :
Примечание переводчика: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях patternMismatch , stepMismatch и typeMismatch обратная логика: true — значение не удовлетворяет атрибуту, false — удовлетворяет.
По умолчанию браузер отобразит лишь одну ошибку. Что мы можем сделать, так это проверить все эти значения самостоятельно и, если найдутся ошибки, сохранить их. Как только мы сохраним все ошибки для одного поля, мы можем отобразить весь их список в виде специального сообщения об ошибке при помощи функции setCustomValidity() .
function CustomValidation() < >CustomValidation.prototype = < // Установим пустой массив сообщений об ошибках invalidities: [], // Метод, проверяющий валидность checkValidity: function(input) < var validity = input.validity; if (validity.patternMismatch) < this.addInvalidity('This is the wrong pattern for this field'); >if (validity.rangeOverflow) < var max = getAttributeValue(input, 'max'); this.addInvalidity('The maximum value should be ' + max); >if (validity.rangeUnderflow) < var min = getAttributeValue(input, 'min'); this.addInvalidity('The minimum value should be ' + min); >if (validity.stepMismatch) < var step = getAttributeValue(input, 'step'); this.addInvalidity('This number needs to be a multiple of ' + step); >// И остальные проверки валидности. >, // Добавляем сообщение об ошибке в массив ошибок addInvalidity: function(message) < this.invalidities.push(message); >, // Получаем общий текст сообщений об ошибках getInvalidities: function() < return this.invalidities.join('. \n'); >>; // Добавляем обработчик клика на кнопку отправки формы submit.addEventListener('click', function(e) < // Пройдёмся по всем полям for (var i = 0; i < inputs.length; i++) < var input = inputs[i]; // Проверим валидность поля, используя встроенную в JavaScript функцию checkValidity() if (input.checkValidity() == false) < var inputCustomValidation = new CustomValidation(); // Создадим объект CustomValidation inputCustomValidation.checkValidity(input); // Выявим ошибки var customValidityMessage = inputCustomValidation.getInvalidities(); // Получим все сообщения об ошибках input.setCustomValidity(customValidityMessage); // Установим специальное сообщение об ошибке >// закончился if > // закончился цикл >); Теперь при попытке отправить форму мы увидим вот это:
Отображаем несколько ошибок в одном тултипе
Стало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.
Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.
Показываем все ошибки для всех полей
Вместо того, чтобы использовать встроенный тултип, мы можем добавлять сообщения об ошибках напрямую в DOM. Таким образом, все ошибки будут выводиться рядом с соответствующим полем.
Этого можно добиться какой-то парой дополнительных строчек в нашем коде:
CustomValidation.prototype.getInvaliditiesForHTML = function() < return this.invalidities.join('.
'); > // Добавляем обработчик клика на кнопку отправки формы submit.addEventListener('click', function(e) < // Пройдёмся по всем полям for (var i = 0; i < inputs.length; i++) < var input = inputs[i]; // Проверим валидность поля, используя встроенную в JavaScript функцию checkValidity() if (input.checkValidity() == false) < var inputCustomValidation = new CustomValidation(); // Создадим объект CustomValidation inputCustomValidation.checkValidity(input); // Выявим ошибки var customValidityMessage = inputCustomValidation.getInvalidities(); // Получим все сообщения об ошибках input.setCustomValidity(customValidityMessage); // Установим специальное сообщение об ошибке // Добавим ошибки в документ var customValidityMessageForHTML = inputCustomValidation.getInvaliditiesForHTML(); input.insertAdjacentHTML('afterend', '' + customValidityMessageForHTML + '
') stopSubmit = true; > // закончился if > // закончился цикл if (stopSubmit) < e.preventDefault(); >>); Вот что происходит при клике на submit теперь:
Используем нестандартные проверки валидности
Иногда встроенной в браузер валидации бывает недостаточно. Нам может понадобиться, чтобы вводимые данные удовлетворяли некоторым дополнительным правилам. Например, чтобы в текстовом поле требовалось указать особые символы.
Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity , мы можем просто-напросто добавить туда ещё несколько проверок.
CustomValidation.prototype.checkValidity = function(input) < // Тут идут встроенные проверки валидности // А тут специальные if (!input.value.match(/[a-z]/g)) < this.addInvalidity('At least 1 lowercase letter is required'); >if (!input.value.match(/[A-Z]/g)) < this.addInvalidity('At least 1 uppercase letter is required'); >>; Валидация в реальном времени
Хотя текущий способ выглядит намного лучше, он тоже не без изъянов. Наихудший из недочётов заключается в том, что пользователь не сможет увидеть никаких сообщений, пока не нажмёт на кнопку отправки формы. Было бы гораздо лучше, если бы валидация поля происходила сразу же при его заполнении. Можно выделить три правила для того, чтобы с формой было удобно работать:
- Требования для каждого поля чётко видны до того, как пользователь начал печатать.
- Как только пользователь начинает вводить данные, соблюдая требования, он сразу видит индикатор успешного заполнения поля или подсказки, если есть ошибки.
- Нужно отображать сообщения об ошибках таким образом, чтобы пользователь не мог отправить некорректно заполненную форму.
Если вы хотите попробовать свои силы (и даже сделать получше), вы можете воспользоваться вот этим шаблоном.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.