Проверка данных HTML-формы с помощью JavaScript

Проверка данных HTML-формы с помощью JavaScript может уменьшить количество загрузок, кликов мышью и движений, а соответственно и время затрачиваемое пользователем сайта на предоставление каких-либо данных. Но сразу скажу, что проверка данных с помощью JavaScript должна делаться только для упрощения использования сайта, и проверять данные HTML-формы обязательно нужно на сервере, так как проверку на JavaScript можно легко обойти.
Для начала посмотрим, как можно получить доступ к форме HTML-документа. На одной странице может быть несколько HTML-форм, и в JavaScript получить доступ к какой-либо форме можно с помощью массива document.forms, который и содержит все формы HTML-документа. Так получить объект формы можно по его номеру n на странице

Узнать общее количество форм на странице можно с помощью свойства length

Получить объект формы можно также и с помощью его имени, заданного атрибутом name в теге <form>, и используя конструкцию document.forms.nameForm или document.forms["nameForm"]. Например

Также можно получить доступ к форме, используя идентификатор id в теге <form> следующим образом

Форма отправляется браузером при клике мышью по кнопке "Отправить" (<input type="submit" value="Отправить">) или при нажатии клавиши Enter в текстовом поле, созданным с помощью тега INPUT. Перед отправкой формы нам нужно проверить значения, содержащиеся в полях формы, а затем либо прервать процесс отправки, с выводом сообщения пользователю, если данные введены не должным образом, либо продолжить отправку, если данные заполнены пользователем корректно. Перехватить отправку формы при клике мышью по кнопке "Отправить" можно с помощью обработчика событий onClick в теге INPUT. Если обработчику вернуть значение false с помощью оператора return

то форма отправлена не будет. Но при перехвате отправки формы по щелчку на кнопке "Отправить", мы не перехватим отправку формы при нажатии клавиши Enter в текстовом поле. Перехватить отправку формы в любом случае можно используя, обработчик события onSubmit в теге <form>, который также отменит отправку формы, если ему с помощью оператора return вернуть значение false. Для проверки данных определим функцию в обработчике событий onSubmit тега <form>, а отправить форму можно методом submit(), который есть у каждого объекта формы, следующим образом

Доступ к элементам формы, создаваемым с помощью тегов INPUT, SELECT, TEXTAREA можно получить несколькими способами. Можно задать каждому тегу свой идентификатор id, и по нему определять объект элемента формы. Можно элементу формы задать имя с помощью атрибута name, и определить объект элемента как свойство объекта формы. Например

Так же у объекта формы есть массив elements (obj_form.elements), который содержит все элементы данной формы. Узнать общее количество элементов формы можно, используя свойство length (obj_form.elements.length). Получить объект элемента формы можно по его номеру n в форме, например

Для примера осуществим проверку данных формы гостевой книги, которая будет иметь поля "Имя", "E-mail", "Сайт" и "Сообщение". Причем поля "Имя" и "Сообщение" обязательны для заполнения. И поэтому, если они не заполнены, выводим сообщение об ошибке пользователю и прерываем отправление формы. Также введем фильтр на длину сообщения, например, длина сообщения должна быть не менее 10 символов. Если длина сообщения будет менее 10 символов, то выводим пользователю сообщение о данной ошибке и прерываем отправку формы.

Форма написана, осталось написать функцию provDataGuest(), которая будет проверять данные введенные в поля. Значение текстового поля (то есть введенный текст), можно найти в свойстве value объекта элемента формы.

Вот мы и написали простенький скрипт обработки данных формы, который придаст сайту небольшой уровень интерактивности. Используя приведенные основы, можно осуществлять различные проверки данных, например, на допустимые символы, на максимальное и минимальное количество символов, на правильность введенных адресов сайта и электронной почты и т.д.