Проверка содержимого форм javascript

Проверка заполнения формы с использованием 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 вначале страницы:

Далее начинается код функции 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

if ( ( document.contact_form.gender[0].checked == false ) && ( document.contact_form.gender[1].checked == false ) )

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

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

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

if ( document.contact_form.age.selectedIndex == 0 )

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

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

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

if ( document.contact_form.terms.checked == false )

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

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

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

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

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

Как выбрать хороший хостинг для своего сайта?

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

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

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

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

Источник

JavaScript валидация форм

При помощи JavaScript можно проводить валидацию (проверку данных) форм HTML.

Например, в следующем примере если поле формы (fname) пусто, то функция выводит сообщение с предупреждением и возвращает значение false, чтобы предотвратить отправку данных формы:

Функцию можно вызывать при возникновении события отправки данных формы:

JavaScript может проверять ввод чисел

Часто JavaScript используется для проверки введенных чисел. Попробуйте сами:

Автоматическая проверка HTML форм

Проверка HTML форм также может проводиться браузером автоматически.

В следующем примере, если поле формы (fname) пусто, атрибут required запрещает отправку данных формы:

Внимание! Автоматическая проверка HTML форм не работает в Internet Explorer 9 и более ранних его версиях.

Проверка данных

Проверка данных проводится для того, чтобы гарантировать, что пользователь ввел корректные, полезные данные без ошибок.

Типичная проверка состоит в поиске ответов на следующие вопросы:

• Заполнил ли пользователь все необходимые поля?
• Корректны ли введенные данные?
• Не ввел ли пользователь текст в поля для цифр?

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

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

Проверка на стороне сервера осуществляется веб-сервером после получения им введенных данных.

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

Ограничивающая проверка HTML

В HTML5 была добавлена новая концепция HTML проверки, название которой можно было бы перевести как «ограничивающая проверка» (англ. Constraint Validation).

Ограничивающая проверка HTML основывается на:

Атрибуты ограничивающей проверки элемента ввода

Атрибут	Описание
disabled	Определяет, что элемент ввода отключен
max	Определяет максимальное значение в элементе ввода
min	Определяет минимальное значение в элементе ввода
pattern	Определяет шаблон значений в элементе ввода
required	Определяет, что элемент ввода обязателен для заполнения
type	Определяет тип элемента ввода

Полный список атрибутов см. в справке по HTML тегу .

CSS псевдоселекторы ограничивающей проверки

Селектор	Описание
:disabled	Выбирает элемент ввода с атрибутом «disabled»
:invalid	Выбирает элемент ввода с некорректным значением
:optional	Выбирает элемент ввода без атрибута «required»
:required	Выбирает элемент ввода с атрибутом «required»
:valid	Выбирает элемент ввода с корректным значением

О том, что такое псевдоклассы см. раздел CSS псевдоклассы.

Методы DOM ограничивающей проверки

Метод	Описание
checkValidity()	Возвращает true, если элемент ввода содержит корректные данные
setCustomValidity()	Устанавливает свойство validationMessage для элемента ввода

Пример
Если поле ввода содержит некорректные данные, вывести сообщение:

Свойства DOM ограничивающей проверки

Свойство	Описание
validity	Содержит набор свойств типа boolean, определяющих состояние валидности (правильности) элемента ввода
validationMessage	Содержит сообщение, которое выведет браузер в случае неудачной проверки
willValidate	Указывает, будет ли элемент ввода проверяться

Свойства валидности

Свойство validity элемента ввода содержит некий набор свойств, определяющих состояние валидности данных:

Свойство	Описание
customError	Установлено в true, если задано пользовательское сообщение о валидности.
patternMismatch	Установлено в true, если значение элемента не соответствует шаблону в атрибуте pattern.
rangeOverflow	Установлено в true, если значение элемента больше значения в атрибуте max.
rangeUnderflow	Установлено в true, если значение элемента меньше значения в атрибуте min.
stepMismatch	Установлено в true, если значение элемента неверно по атрибуту step.
tooLong	Установлено в true, если значение элемента превышает значение атрибута maxLength.
typeMismatch	Установлено в true, если значение элемента неверно по атрибуту type.
valueMissing	Установлено в true, если у элемента (с атрибутом required) нет значения.
valid	Установлено в true, если значение элемента валидно.

Пример №1. Свойство rangeOverflow.

Если число в поле ввода больше 100 (атрибут max элемента ), то вывести сообщение:

  OK  

Пример №2. Свойство rangeUnderflow.

Если число в поле ввода меньше 100 (атрибут min элемента ), то вывести сообщение:

  OK  

Источник