Проверка заполнения полей формы javascript

Проверка заполнения полей формы javascript

Данный урок описывает, как создать JavaScript форму, которая проверяет правильность заполнения посетителем полей перед отправкой данных на сервер. Сначала мы объясним, почему проверка заполнения формы является полезной методикой, а затем построим простой пример с объяснением, как все происходит.

Зачем нужна проверка заполнения формы?

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

Существует два основных метода для проверки заполнения формы: на стороне сервера (с использованием CGI скриптов, ASP и т.д.) и на стороне клиента (обычно используется JavaScript). Проверка на стороне сервера более безопасная, но в большинстве случаев требует более сложного кода, в то время как проверка на стороне клиента выполняется проще и быстрее (браузер не нуждается в соединении с сервером для проверки заполнения формы, таким образом, пользователь получает немедленный ответ в случае пропущенных полей, которые необходимо заполнить).

Проверка формы на стороне клиента. Обычно выполняется с помощью встроенного JavaScript скрипта.

Проверка формы на стороне сервера. Обычно выполняется с помощью CGI или ASP скрипта.

В данном уроке мы построим простую форму с проверкой на стороне клиента с помощью JavaScript. Вы сможете затем адаптировать ее под свои нужды.

Простая форма с проверкой.

Давайте построим простую форму с проверкой заполнения с помощью скрипта. Данная форма имеет одно текстовое поле "Ваше имя" и кнопку для отправки данных. Наш скрипт проверяет, что пользователь ввел свое имя перед тем, как отправить данные на сервер.

Откройте форму и посмотрите в действии. Попробуйте нажать кнопку "Отправить данные" ничего не вводя в поле "Ваше имя".

Вы также можете открыть исходный код формы в другом окне, чтобы было удобно работать с уроком.

Страница содержит функцию JavaScript, которая называется validate_form(). Она выполняет проверку заполнения формы. давайте посмотрим сначала на форму.

Читайте также:  Matroska splitter что это

Форма

Первая часть формы — тэг form

Функция validate_form()

Функция проверки формы validate_form() встроена в секцию head вначале страницы:

В этой статье мы начнём разбираться с более сложными и функционально-законченными скриптами. Пройдём по шагам через все стадии — начиная с постановки задачи и заканчивая универсальным скриптом, готовым к употреблению. И начнём с проверки формы перед отсылкой на сервер.
Общие соображения и html-код формы

Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо её вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна — проверить, что пользователь заполнил все нужные поля перед отправкой и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.

Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так:

* — необходимые для заполнения поля

Заметьте, что в отличие от обычной формы непосредственно в теге мы отслеживаем событие onsubmit и при его наступлении вызываем функцию проверки формы sendform().

Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onclick? Ответ простой — при использовании события onclick кнопку "submit" придётся заменить обычной кнопкой. И, в случае, если в броузере отключена поддержка javascript, мы не сможем отправить форму (!). Отслеживание же события onsubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.

Будем считать, что необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес.

Если Вы внимательно присмотритесь к html-коду нашей формы, то заметите, что рядом с этими полями я поставил звёздочку, а в конце формы разместил сноску. Сделано это, разумеется, для удобства и элементарного уважения к пользователю.

Функция проверки формы перед отправкой

Читайте также:  Повторы слов в тексте

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

Для начала напишем общую обвязку функции:

Применённый нами способ вызова функции через событие onsubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.

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

В цикле происходит проверка всех полей формы на совпадение с "обязательными". В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом — введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля.

Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности — содержимое двух массивов) может быть адаптирована к любой форме.

В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.js присутствовало несколько функций для проверки разных форм, что увеличивало объём кода и ухудшало его восприятие.

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

Читайте также:  Как сделать резервную копию леново

Суть этого способа:

  1. В html-разметке для обязательных полей добавляется data-атрибут, который является маркером обязательности.
  2. Проверка выполняется только для тех полей, у которых присутствует данный атрибут.
  3. Возможность расширения функционала проверкой значения, указанного пользователем в поле.

Пример разметки формы:

Пример кода проверки полей:

Пример реализации для двух форм на странице:

Спасибо за внимание!

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

  • 18 сентября 2019 в 16:01 Проблемы и нюансы при разработке под SmartTV с использованием React.js
  • 22 января 2020 в 11:16 Попытка обойтись без require в Node.js
  • 1 февраля 2020 в 21:19 Форма авторизации на простом HTML с пояснениями
  • 9 февраля 2020 в 22:55 Интерактивная флеш-схема на HTML
  • 24 февраля 2020 в 20:28 Что мы знаем нового о вторичном магнитном поле со времен Никола Тесла?

Выясняем с помощью теста, что подарить коллегам

Это «Песочница» — раздел, в который попадают дебютные посты пользователей, желающих стать полноправными участниками сообщества.

Если у вас есть приглашение, отправьте его автору понравившейся публикации — тогда её смогут прочитать и обсудить все остальные пользователи Хабра.

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

Не надо пропускать:

  • рекламные и PR-публикации
  • вопросы и просьбы (для них есть Хабр Q&A);
  • вакансии (используйте Хабр Карьеру)
  • статьи, ранее опубликованные на других сайтах;
  • статьи без правильно расставленных знаков препинания, со смайликами, с обилием восклицательных знаков, неоправданным выделением слов и предложений и другим неуместным форматированием текста;
  • жалобы на компании и предоставляемые услуги;
  • низкокачественные переводы;
  • куски программного кода без пояснений;
  • односложные статьи;
  • статьи, слабо относящиеся к или не относящиеся к ней вовсе.
Ссылка на основную публикацию
Представьте что вы приглашены
Обратить внимание на структуру урока: Цель: мотивировать деятельность учащихся на уроке; Эмоционально настроить детей на работу. 2. Словарно – орфографическая...
Потух экран на ноутбуке что делать
В этой статье мы рассмотрим возможные решения проблемы, когда ноутбук работает но не включается экран. Это может произойти с каждым...
Поцарапала сковороду с антипригарным покрытием что делать
Сковорода с антипригарным напылением — это современная кухонная утварь, которая есть почти на каждой кухне. Благодаря покрытию пища не прилипает...
Правила покупки билетов на поезд
» Железнодорожный транспорт » Правила продажи билетов на поезд Как купить железнодорожные билеты на поезд? Проездные документы действительны только по...
Adblock detector