02
Фев

Проверка полей формы перед отправкой на JavaScript

Мои лучшие статьи:
Проверка форм JavaScriptПри добавлении на сайт той или иной формы, к примеру, формы обратной связи, часто возникает необходимость проверки всех или некоторых полей перед отправкой на предмет их заполненности. Теоретически это можно сделать средствами PHP, однако использование JavaScript позволяет разгрузить серверный скрипт, перенеся все действие непосредственно в браузер пользователя.

Предположим, что у нас есть небольшая форма, состоящая из двух input-ов (text и password), textarea и кнопки отправки (input submit). Наша задача – непосредственно перед отправкой формы проверить два первых input и textarea на пустоту. Если пустых полей не будет, то форма должна отправляться. Если пустые поля будут, то их необходимо обвести красной рамкой, вывести сообщение в виде alert о том, что необходимо заполнить все поля, а затем запретить отправку формы. После того, как пользователь уберет alert, цвет рамки полей должен вернуться в изначальное состояние. Красиво оформить саму форму Вам поможет сайт Жеки Несмелова.

Простая форма на JavaScript

Для того, чтобы все работало, как надо, к событию onsubmit формы привяжем возвращаемое функцией send() значение. Данная функция будет возвращать true или false в зависимости от того, все ли поля заполнены. Если вернется false, то при нажатии на кнопку форма не отправится, если true – то отправится. Заметьте, что мы не задаем полям id (так их бы было гораздо проще выцепить через DOM-модель JavaScript).

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

Теперь переходим к JavaScript-коду. Здесь будет две функции. Первая функция send() осуществляет непосредственную проверку. По значению переменной valid мы поймем, заполнены ли все поля после того, как проверка окончится. В elems помещаем все элементы первой формы (индекс = 0) нашего документа. Вместо 0 можно использовать, к примеру, имя формы в виде строки (если оно задано). Далее в цикле проходим по всем элементам данной формы, попутно проверяя, является ли текущий элемент textarea, либо input с type = text || password. Если это так, то проверяем значение value данного элемента. Ведь именно в value будет лежать текст, введенный пользователем. Если value = пустой строке, то присваиваем border-у элемента красный цвет, а переменную valid ставим в false. В самом конце после прохождения всех элементов проверяем valid. Если там false – выводим alert, запрещаем отправку формы и подсвечиваем красным лишь те поля, которые не заполнены. В противном случае отправляем форму.

Проверка полей формы на JavaScript

Вторая функция в JavaScript-коде будет выполняться сразу после загрузки документа. При наведении курсора мыши на форму (событие onmouseover) в цикле начнется перебор всех ее элементов. Если у какого-либо из элементов CSS-свойство border = '2px solid red', то ему присваивается значение по умолчанию (красный цвет убирается).

На этом все. Осталось только красиво оформить вашу форму!


Оставь комментарий, нажми «Мне нравится» («Like») и «Сохранить», а я напишу для тебя еще что-нибудь интересное :)
 

Обо мне

MeЭто Я! Выпускник факультета «ТЭ» Южно-Уральского Государственного Университета.
"Не судите человека, пока не поговорите с ним лично, потому что все что вы слышите - слухи", - Майкл Джексон.


RSS блога Ритм ЖизниШичкин Сергей в Twitter