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

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

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

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

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

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

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

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

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

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

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

Форма

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

Форма имеет имя contact_form. С его помощью мы получим доступ к форме из JavaScript функции проверки.

Форма использует постметод для отправки данных в htm-файл заглушку, который просто выводит сообщение. В действительности Вы можете пересылать данные Вашему CGI скрипту, ASP странице и т.д. (например для отправки почты).

Также тэг form содержит onsubmit атрибут для вызова JavaScript функции проверки validate_form (), когда нажимается кнопка "Отправить данные". Функция возвращает логическое значение, для которого true означает "проверка прошла успешно", а false - "данные задержаны". Таким образом мы можем предотвратить отправку данных формы, если пользователь не заполнил ее правильно.

Остальной код формы добавляет поле ввода contact_name и кнопку "Отправить данные":

Функция validate_form()

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

Первая строчка (<script type="text/javascript">) указывает браузеру, что далее идет код JavaScript, а коментарий HTML (<!--) скрывает скрипт от старых браузеров, которые не поддерживают JavaScript.

Далее начинается код функции validate_form(), и устанавливается значение переменной valid в true.

Мы используем переменную valid для определения правильности заполнения формы. Если хотябы одна проверка не пройдет, мы установим занчение false и форма не будет отправлена.

Следующие пять строк проверяют значение поля contact_name на заполнение.

Если поле пустое, пользователь будет предупрежден с помощью окна сообщений и значение переменной будет установлено в false.

Далее мы возвращаем значение нашей переменной обработчику события onSubmit (как было описано выше). Если значнеие установлено в true - форма отправляется на сервер, если в false - форма не отправляется.

В конце мы закрываем функцию validate_form(), коментарий HTML и скрипт.

Это очень простой пример проверки формы с помощью JavaScript. Наш код выполняет проверку только одного поля. Давайте расширим данный пример более сложной функцией, которая проверяет несколько полей. Также рассмотрим, как выполняется проверка других типов поле ввода, таких как выпадающие списки и радиокнопки.

Давайте рассомтрим более сложную форму с несколькими различными типами полей ввода.

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

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

Также как и в предыдущем примере страница имеет форму под названием contact_form и функцию validate_form(). В дополнение к текстовому полю форма имеет радиокнопки, выпадающий список и чекбокс.

Функция validate_form() выполняет три дополнительных проверки, по одной для каждого нового поля.

Проверка радиокнопок.

После проверки текстового поля contact_name выполняется проверка радикнопок gender

Данный код проверяет была ли нажата хотябы одна радиокнопка ("Мужской" или "Женский"). Если ничего не было нажато (checked == false), пользователю выдается сообщение и переменная valid устанавливается в значение false.

Проверка выпадающего списка

Затем выполняется проверка выпадающего списка "Age", выбрал ли пользователь опцию. В форме первая опция в выпадающем списке называется "Пожалуйста, выберите Ваш возраст". JavaScript функция может проверить, какая опция была выбрана, когда обрабатывается форма. Если выбрана первая опция, то мы знаем, что пользователь не выбрал настоящий возраст, и выдаем предупреждение об этом:

Помните, что значения selectedIndex начинаются с 0 (для первой опции).

Проверка чекбокса

В завершении проверяется чекбокс "terms". Мы хотим, чтобы пользователь был согласен с условиями соглашения, поэтому нужно быть уверенным, что он отметил свое согласие:

Так как мы устанавливаем переменную valid в значение false в любом из перечисленных выше случаев, если хотя бы одно нарушение произойдет, то данные формы не будут отправлены на сервер. Если пользователь незаполнил более одного поля, то он увидит окно сообщения для каждого незаполненного поля.

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

Следует отметить, что проверку заполнения с помощью JavaScript можно легко обойти отключив поддержку JavaScript в браузере. Таким образом для надежной проверки Вам следует использовать скрипты на серверной стороне. Однако, для каждодневного использования JavaScript является простым и легким решением для проверки формы перед отправкой данных на сервер.

Данный урок подготовлен для вас командой сайта ruseller.com Источник урока: www.elated.com Перевел: Сергей Фастунов Урок создан: 14 Июня 2010 Просмотров: 218230 Правила перепечатки

5 последних уроков рубрики "Разное"

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

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

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.