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

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

Для того, чтобы все работало, как надо, к событию 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-коде будет выполняться сразу после загрузки документа. При наведении курсора мыши на форму (событие onmouseover) в цикле начнется перебор всех ее элементов. Если у какого-либо из элементов CSS-свойство border = "2px solid red", то ему присваивается значение по умолчанию (красный цвет убирается).

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

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

В нашем примере у нас 5 полей, которые необходимо заполнить:

- имя
- сообщение
- e-mail
- контактный телефон
- контрольное число для защиты

Помимо простой проверки на пустоту поля, мы покажем

как проверить правильно ли введен e-mail и телефон

Проверять поля мы будем с помощью JavaScript. В последнее поле необходимо ввести определенное число (для защиты от автоматического заполнения). Если поля будут пустыми, появится alert-окно с уведомлением. К данному скрипту мы сразу прибавили отправку заполненной формы на почту, делать мы это будет с помощью php.

Итак, создаем файл index.php и пишем туда следующую форму:

1. Ваше имя:

2. Сообщение:

3. E-Mail

4. Контактный телефон

3. Введите сумму 10+10





Создаем файл data.js , пишем в него код проверки:
function Formdata(data){
/* если не заполнено поле Ваше имя, длина менее 3-x*/
if (data.fnm != null && data.fnm.value.length < 3)
{
alert("Заполните поле "Ваше имя"");
return false;}

/* если не заполнено поле Сообщение */
if (data.text != null && data.text.value.length < 3)
{
alert("Заполните поле "Сообщение"");
return false;}

/* e-mail Юзера */
if(data.email != null && data.email.value.length == 0)
{
alert("поле "E-Mail" пустое");
return false;}

if(data.email != null && data.email.value.length < 6)
{
alert("слишком короткий "E-Mail"");
return false;}

if(!(/^w+[-_.]*w+@w+-?w+.{2,4}$/.test(data.email.value)))
{
alert("Введите правильный E-Mail адрес");
return false;}

/* контактный телефон */
if(data.phone != null && data.phone.value.length == 0)
{
alert("поле "Контактный телефон" пустое");
return false;}

if(data.phone != null && data.phone.value.length < 5)
{
alert("поле "Контактный телефон" должно содержать минимум пять символов");
return false;}

if(!(/^+z/.test(data.phone.value+"z")))
{
alert(""Контактный телефон" указан неверно");
return false;}

/* делаем чтобы поле сумма было равно определенному числу */
number = document.getElementById("summa");
if (number.value !== "20")
{
alert(""Сумма" не введена или введена неверно");
return false;}
} Подгружаем данный файл в наш документ, помещаем его между тегами head:

Вот и готова наша проверка. Теперь после того, как все данные введены отправляем нашу форму нам на почту.
В файл index.php пишем php-код:

Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты - e-mail. Ниже я покажу два варианта скриптов с проверкой правильности почты и без нее.

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

Для осуществления задуманного, нам нужно для начала создать саму форму. У Вас она уже может быть, если вы захотите данный материал внедрить в нее, нужно будет его адаптировать под вашу форму. Я же покажу все на своем примере. Моя форма ничего не будет отправлять, в этой статье нет обработчика для отправки писем, чтобы не усложнять материал. Обработчик отправки писем, это другая история. Для начала сам HTML код формы.

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

• id="file_form" - айди для нашей формы. ID - обязателен, он будет тоже использоваться в скрипте.
• - обязательный блок. Это контейнер для вывода сообщений об ошибке от скрипта. данный блок можно разместить и вне формы. Задать ему любые стили. В примере, это тот красный текст, что сообщает об незаполненном поле.
• onclick="frmotpr();" - событие, которое будет запускать функцию из нашего скрипта, при нажатии на кнопку. Данное событие добавлено к кнопке ОТПРАВИТЬ . Предпоследняя строка в коде.
• Всем полям тоже присвоены ID и классы. Они тоже понадобятся для нашего скрипта валидации. ID для поля с e-mail особенно важен для нашего будущего скрипта, что будет проверять правильность введенного e-mail.

Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного CSS стилей.Если вы будете использовать их на своем сайте, то добавьте их в свой файл стилей.

#file_form{ width:300px; background:#fff; padding:15px; margin:3px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; box-shadow:0 0 10px rgba(0,0,0,.1); border:1px solid #36c; } .in_pl{ width:90%; margin-bottom:15px; padding:10px 15px; border-radius:25px; border:none; box-shadow:0 0 5px rgba(0,0,0,.2) inset; background:#fff; } .in_pl:focus{ background:#fff; } #sub_f{ padding:5px 15px; border:none; border-radius:25px; box-shadow:0 0 2px 1px rgba(0,0,0,.2); background:#36c; color:#fff; cursor:pointer; } #sub_f:hover{background:#333;} .fl_fr{ width:100%; text-align:center; font-size:15px; color:#333; cursor: pointer; border:none; margin-bottom:10px; } #messenger{ text-align:center; display:none; color:#f00; margin:15px 0; } .notvalid{background:rgba(255,0,0,.2);}

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

• #messenger - это стили для того самого блока с выводом сообщений. Главный параметр для этого класса - это display:none. Тоесть мы изначально скрываем блок.
• .notvalid - это стили для класса, который будет присваиваться нашим скриптом к тому полю, что не заполнено или заполнено не корректно. Об этом классе я еще раз упомяну ниже.

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

Так как наш скрипт работает с помощью jQuery , нужно чтобы была подключена библиотека jQuery. Если она не подключена ранее, сделайте это, добавив вот такую строку:

Куда и как правильнее добавлять библиотеку, вы можете прочитать в статье - .

После библиотеки, не перед ней, а именно после нужно уже подключать, наш долгожданный скрипт валидации формы. как и писал ранее, первым вариантом будет сначала скрипт проверки поле на заполнение, без проверки правильности введенной почты. Сам скрипт имеет следующий вид:

32)
bad += "Имя слишком длинное" + "\n";
if (pass.length < 3)
bad += "Пароль слишком короткий" + "\n";
if (pass.length > 32)
bad += "Пароль слишком длинный" + "\n";
if (message.length < 3)
bad += "Сообщение слишком короткое" + "\n";
if (rules != "on")
bad += "Вы не согласились с правилами" + "\n";
if (file.length == 0)
bad += "Вы не выбрали файл для загрузки" + "\n";
if (bad != "") {
bad = "Неверно заполнена форма:" + "\n" + bad;
alert(bad);
return false;
}
return true;
}

В данном скрипте мы сначала получаем все данные, нуждающиеся в проверке, и записываем их в переменные. Затем создаём переменную bad , в которую записываем все некорректные данные. Затем идёт целый набор IF , которые проверяют поля в форме и записывают все ошибки в переменную bad . Затем, если переменная bad не пустая (то есть были ошибки), то выводим окно (alert() ) с ошибками. И возвращаем false , чтобы форма не была отправлена. Если переменная bad пустая, то дальше просто возвращаем true , чтобы форма была отправлена уже на обработку в "handler.php ".

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

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

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

< form action = "/cgi-bin/formmail.cgi" onsubmit = "return sendform();" >

Ваше имя : *< input type = "text" name = "name" >< br >
Электронный адрес : *< input type = "text" name = "email" >< br >
Тема сообщения : < input type = "text" name = "subject" >< br >
Сообщение : < textarea name = "message" >< br >< br >

< input type = "submit" value = "Отправить" >
< input type = "reset" value = "Очистить" >

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

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

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

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

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

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

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

< script language = "javascript" >

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

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

< script language = "javascript" >

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

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

Универсальная функция проверки

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

Первым делом мы создадим массив, где перечислим имена всех полей, которые требуют проверки:

Required = new array("name", "email");

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

Дополнительно к вышеописанному массиву мы добавим ещё один, который будет содержать текст ошибки для конкретного поля:

Required_show = new array("Ваше имя", "электронный адрес");

Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введён".

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

< script language = "javascript" >

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

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

Назад