Валидация формы обратной связи.

Вступление.

На многих сайтах присутствует страница с формой обратной связи, элемент достаточно нужный и с этим трудно не согласиться. Давайте вместе создадим такую форму, позволим пользователю ввести в неё данные, проверим их на корректность и после этого отправим данные на сервер.

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

Немного подумав, мы решили, что форма будет иметь следующие поля:

  1. имя — ведь нам нужно как-то обращаться к пользователю, когда мы будем писать ему ответ;
  2. электронная почта — мы же должны знать, куда отправлять ответ;
  3. тема сообщения — тоже необходимая информация, по ней мы определимся, кто будет отвечать на это письмо;
  4. текст сообщения — здесь комментарии излишни.

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

Мы не будем подробно рассматривать этапы создания HTML вёрстки и оформления её стилями, т.к. наша главная задача — написать скрипт валидации введённых данных и отправить их на сервер. Поэтому сразу представим готовую разметку HTML и таблицу стилей для него с минимумом комментариев.

HTML-разметка формы обратной связи.

Отметим лишь один элемент данной формы:

В этот <span> мы будем выводить красиво оформленное сообщение об ошибке.

Таблица стилей для формы обратной связи.

Получившаяся форма обратной связи выглядит превосходно, вы не находите? Теперь нам ещё нужно придумать, как обработать эту замечательную форму. Вот мы и подошли вплотную к написанию js-скрипта.

Критерии валидации формы обратной связи.

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

Во-первых, для всех полей формы проверяем заполнены они или нет. Это самая простая проверка.

Это очень важно.
Для следующих проверок будут использоваться регулярные выражения. Мы не будем разбирать, как составляются и работают регулярные выражения. Это отдельная и достаточно объёмная тема для разговора. О регулярных выражениях вы сможете прочитать здесь.
При написании скрипта валидации мы будем использовать уже готовые паттерны (шаблоны) RegExp.

Во-вторых, поле «Ваше имя». Давайте определимся, что мы ожидаем получить реальное имя человека на русском языке. Значит поступившие данные должны содержать только прописные и строчные буквы русского алфавита. Разрешим ещё и пробел — пользователь кроме имени может указать ещё и своё отчество. Наличие любых других символов приведёт к ошибке.
Паттерн RegExp для такой проверки будет выглядеть так: /^[а-яёА-ЯЁ\s]+$/.

В-третьих, поле «Электронная почта». Здесь особых объяснений не нужно.
Паттерн RegExp для этого поля выглядит так:
/^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z])+$/.

В-четвёртых, поля «Тема сообщения» и «Текст сообщения». В этих полях допустимы любые символы, но мы всё же подстрахуемся и запретим символы квадратных и угловых скобок, процентов, апострофа, амперсанда и одиночных кавычек. Это защитит нас на начальном этапе от спамеров и желающих повесить эксплойт на наш сайт.
Более серьёзная проверка на спам и защита от хакеров осуществляется в php-скрипте, в который мы передадим данные формы, но это находится за пределами темы нашей статьи.
Паттерн RegExp будет такой: /[^\<\>\[\]%'`]+$/.

Начинаем писать Javascript валидации формы.

Для ограничения области видимости нашего скрипта и исключения конфликтов с другими js-скриптами, разместим код в анонимной самозапускающейся функции.

Теперь нам нужно получить объект формы, с которым мы и будем дальше работать. Если по каким-то причинам объект form получить не удалось, то прекращаем работу функции

Кроме объекта form нам необходимо получить ещё ряд объектов, коллекций, объявить переменные и присвоить им значения.

Итак, мы получили объект btn кнопки <button type="submit">. Теперь повесим на него обработчик события, который будет запускать валидацию формы. Для этого мы будем использовать метод addEventListener, являющийся современным способом назначить обработчик. В качестве него будет использоваться функция validForm.

Прежде чем переходить к валидации данных, нужно эти данные получить. Для этой цели мы напишем функцию getFormData, а вызывать её будем из уже объявленной функции validForm. Аргументом функции getFormData будет являться объект form.

А вот код самой функции getFormData, которая возвращает объект с полученными значениями полей формы.

Итак, объект со значениями полей формы обратной связи в формате 'property': 'value' получены. И что же нам с ними делать дальше?
Чтобы перебрать свойства объекта воспользуемся циклом for...in. Этот цикл последовательно переберёт свойства объекта property и имя каждого свойства будет использовано в качестве ключа для получения значения этого свойства: formVal.propertyName.
Кроме этого, при каждой транзакции цикла будем устанавливать переменные iserror и error в исходное значение. Переменная iserror используется как флаг: если iserror == true — значит валидация не прошла, есть какая-то ошибка.

Посмотрим, как теперь выглядит функция validForm:

Теперь мы знаем как получить имя свойства объекта, которое равно имени поля формы, знаем как получить значение этого свойства. Теперь нужно решить, каким способом мы будем назначать полученному свойству соответствующий ему паттерн RegExp для проверки корректности его значения.
Обычно это делается с помощью конструкций if else или switch.
Но есть ещё один малоизвестный способ, который заменяет эти конструкции — использование объектного литерала. Мы сэкономим несколько строчек кода, при сохранении функциональности. Давайте и остановимся на этом способе.

Валидация шаг за шагом

Давайте ещё раз, шаг за шагом, рассмотрим как работает функция getError на примере валидации поля ‘usermail’.

  • 1

    Сначала мы создаём литеральный объект validate, у которого значением свойства является анонимная функция.

  • 2

    Затем мы вызываем анонимную функцию, указывая свойство, значением которого эта функция является.

  • 3

    В теле функции мы осуществляем проверку с использованием объекта formVal, в котором находятся значения всех полей формы обратной связи. В нашем случае это formVal.usermail.
    Сначала мы сравниваем длину formVal.usermail с 0.

    Затем сравниваем formVal.usermail с шаблоном RegExp patternMail

  • 4

    Если условие сравнения окажется истинным, то присваиваем переменной error соответствующее значение из массива ошибок: errorMess[2] или errorMess[3]
    Если оба условия сравнения ложны, то переменной error ничего не присваивается.

  • 5

    Возвращаем значение переменной error, которое является или строкой с текстом ошибки или пустой строкой.

Обработка переменной error

Опять возвращаемся к функции validForm. После вызова функции getError мы получили значение переменной error. А что с ней будем делать дальше? А это зависит от того, что в себе содержит эта переменная: строку с текстом ошибки или пустую строку.
Начнём с того, что сравним длину строки, содержащейся в переменной error с 0. Если результат проверки не будет равен 0, значит в error находится текст ошибки и нужно показать эту ошибку пользователю. Для этого мы создадим функцию showError, у которой есть два аргумента:
1. property — имя поля, в которое ввели некорректные данные;
2. error — строка с текстом ошибки.
Кроме этого, нужно установить флаг ошибки, присвоив переменной iserror значение true.

Если валидация ошибок не обнаружила, то вызываем функцию sendFormData, которая отправляет данные на сервер. Аргументом этой функции является объект formVal. Напоминаем, что в нём хранятся данные формы, записанные в формате 'property': 'value'.

Посмотрим, как теперь будет выглядеть окончательный вариант нашей функции validForm, с учётом выше изложенного:

Теперь настало время разобраться, как вывести ошибки валидации на экран.
Как уже говорилось, для этой цели будем использовать функцию showError с аргументами property и error.

Вывод ошибок валидации на экран.

При создании разметки HTML мы отметили, что ошибку будем выводить в элемент <span> с классом .error. У вас может возникнуть естественный вопрос: в вёрстке четыре таких элемента, как мы определим, в какой из них записывать ошибку? Ведь у них нет ни id, ни атрибутов data-..., с помощью которых можно было бы идентифицировать нужный нам <span>.
Всё очень просто, мы это сделаем с помощью DOM-навигации, но для начала давайте вспомним HTML-разметку для одного поля формы.

Рассмотрим ещё раз шаг за шагом DOM-навигацию по элементам, так, как она реализована в функции showError:

  • 1

    Используя аргумент property, который является значением атрибута name элемента <input>, находим этот <input>. Это будет отправная точка DOM-навигации.

  • 2

    Мы видим, что <span class="error">, расположен сразу же после элемента <div>, который является родительским по отношению к <input>. Находим этот <div> с помощью метода DOM-навигации parentElement.

  • 3

    Теперь несложно добраться и до самого <span>, используя метод nextElementSibling и записать в него текст ошибки.

  • 4

    Изменяем стиль отображения <input>, добавив ему новый класс .form-control_error.

Полный код функции showError выглядит так:

Проверяем функционирование скрипта валидации формы, внося разные ошибки при заполнении формы. Скрипт прекрасно их отлавливает и выводит сообщения. Кажется, что работу на скриптом валидации мы закончили. Но не будем торопиться.
Вы обратили внимание, что когда пробуете отредактировать текст, относящаяся к нему ошибка не пропадает, создавая определённые неудобства? Давайте решим эту проблему путём удаления содержимого <span class="error">.

Удаление текста ошибки при получении фокуса элементом.

Событие focus вызывается, когда вы нажимаете мышкой на элементе формы. Для того, чтобы отследить появление этого события, давайте опять используем метод addEventListener, применив его к объекту form.

Ну и теперь посмотрим код функции cleanError. Ничего сложно в ней нет, она очень похожа на функцию showError, поэтому отдельно расписывать её не будем.

Прекрасно, теперь ошибка пропадает, если мы устанавливаем курсор в поле ввода. Кажется теперь можно перейти к отправке данных формы на сервер. Давайте пока не будем торопиться.
Будет очень здорово, если мы запустим валидацию введённых данных при потере фокуса элементом, т.е. когда пользователь кликнет на другом месте экрана и курсор уйдёт с текущего поля ввода. Это событие называется blur.

Валидация данных при потере фокуса поля ввода.

Первое, что нам нужно сделать, это повесить обработчики события blur на все поля ввода формы обратной связи. У нас уже есть коллекция этих элементов, которую мы получили при инициализации скрипта — elements. Оптимальным решением будет использование метода forEach. Этот метод совершает обход коллекции элементов полей ввода и назначает обработчик события blur вызовом метода addEventListener для каждого элемента.

При наступлении события blur, определим элемент, с которого ушёл курсор. Далее получаем значение атрибута name и, используя это значение, получаем текст ошибки в переменную error. Если текст ошибки не равен нулю, вызываем функцию showError, которая отобразит эту ошибку. Не правда ли, очень похоже на работу функции validForm? Только validForm обходит все поля формы, а мы работаем с одним, с тем, которое которое покинул курсор.

Вот теперь все возможные варианты валидации формы обратной связи рассмотрены, пользователь всё же ввёл корректные данные и теперь они должны быть отправлены на сервер для дальнейшей обработки и отправки в виде письма на наш email.

Асинхронная отправка данных формы обратной связи на сервер.

Для отправки данных на сервер будем использовать функцию sendFormData. Непосредственно отправку данных будем осуществлять с помощью объекта XMLHttpRequest. Он позволяет делать HTTP-запросы к серверу без перезагрузки страницы, т.е. асинхронно. Аргументом функции является объект formVal, в котором содержаться имена полей формы и соответствующие им значения.

Итак, мы создали форму обратной связи, ввели в неё данные, сделали валидацию этих данных и отправку их на сервер.

Расширяем форму обратной связи.

Данный скрипт не ограничивает форму обратной связи четырьмя полями, их может быть значительно больше. Структура HTML-верстки и JS-скрипта позволяют гибко, без особых усилий расширить данную форму. Например, вы решили добавить поле, в которое пользователь будет вводить номер своего мобильного телефона. Для этого нужно сделать всего три шага:

  • 1

    Добавить поле ввода, для этого можно скопипастить поле ввода имени пользователя. Прописать ему название — «Номер Вашего телефона» и атрибуту name прописать значение ‘userphone’.

  • 2

    В массив с ошибками errorMess добавить текст ошибки, которая может возникнуть при валидации номера телефона.

  • 3

    Создать шаблон RegExp для валидации введённого номера. Добавить объектному литералу validate в функции getError, свойство ‘userphone’ и, относящуюся к этому свойству, анонимную функцию, в которой будете использовать созданный шаблон.

По такому же принципу вы можете добавлять и другие поля в свою форму обратной связи. Единственная трудность, которая может вам встретиться — это создание паттерна RegExp, остальное делается простым копипастом соседних полей формы.

Комментарии

Всего: 4 комментария
Требования при посте комментариев:
  1. Комментарии должны содержать вопросы и дополнения по статье, ответы на вопросы других пользователей.
    Комментарии содержащие обсуждение политики, будут безжалостно удаляться.
  2. Для удобства чтения Вашего кода, не забываейте его форматировать. Вы его можете подсветить код с помощью тега <pre>:
    <pre class="lang:xhtml"> - HTML;
    <pre class="lang:css"> - CSS;
    <pre class="lang:javascript"> - JavaScript.
  3. Если что-то не понятно в статье, постарайтесь указать более конкретно, что именно не понятно.
  • Доброго времени суток!
    Подскажите пожалуйста, как в Ваш скрипт добавить, пользовательские классы, что
    1. поле находится в состоянии — undefined (не определено), ожидает ввода данных, курсор в поле мигает:
    .undefined {border-color: #ffa806;} — бордер жёлтый
    и общее для всех полей,
    2. прошли проверку по RegExp
    .valid {border-color: #44b164;} — бордер зёлёный
    3. не прошли проверку по RegExp
    .invalid {border-color: #d90000;} — бордер красный
    Заранее признателен за ответ!

    • 1. курсор находится в поле, значит это поле в фокусе. Найдите в таблице стилей класс ‘.form-control:focus’ и пропишите для него нужные вам значения.

      2. В функции validForm(), есть условие, которое проверяет наличие ошибки в поле. Если условие выполняется, то вызывается функция showError, отображающая ошибку.
      if (error.length != 0) {
      iserror = true;
      showError(property, error);
      }
      добавьте к ней else
      } else {
      showSuccess(property);
      }
      Теперь нужно создать функцию showSuccess, которая будет работать аналогично функции showError.

      function showSuccess(property) {
      var formElement = form.querySelector(‘[name=’ + property + ‘]’);
      formElement.classList.add(‘form-control_success’);
      }
      Добавьте в таблицу стилей класс form-control_success и пропишите нужные стили в нём.
      По-большому счёту, можно и даже нужно, функции showError и showSuccess свести в одну, упростив js-код, т.к. они по функционалу одинаковые, просто присваивают разные классы.

      3. За красный цвет border при ошибке отвечает класс form-control_error — это реализовано.

      • Вальдемар, большое спасибо за развёрнутый и оперативный комментарий! Буду пилить ). Форма мне очень понравилась.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *