Организовываем проверку формы во время ее заполнения

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

дополнительные материалы к урокам демо версия урока

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

Но давайте все-таки перейдем к созданию верификации на стороне клиента. Делать мы это будем при помощи JQuery и плагина Validation.

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

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

Вот код html-файла:

<!doctype html> <html> <head> <meta charset="windows-1251"> <title>Верификация формы</title> <link rel="stylesheet" href="form.css"> </head> <body> <div class="main"> <h1>Регистрация</h1> <form action="#" method="post" name="signup" id="signup"> <div> <label for="name" class="label">Имя</label> <input name="name" type="text" id="name" > </div> <div> <label for="email" class="label">Электронный адрес</label> <input name="email" type="text" id="email"> </div> <div> <label for="password" class="label">Пароль</label> <input name="password" type="password" id="password"> </div> <div> <label for="confirm_password" class="label">Подтвердите пароль</label> <input name="confirm_password" type="password" id="confirm_password"> </div> <div><span class="label">Хобби</span> <input name="hobby" type="checkbox" id="sweeming" value="sweeming"> <label for="sweeming">Плаванье</label> <input name="hobby" type="checkbox" id="reading" value="reading"> <label for="reading">Чтение</label> <input name="hobby" type="checkbox" id="nothing" value="nothing"> <label for="nothing">Ничего неделанье</label> </div> <div> <label for="dob" class="label">Дата рождения</label> <input name="dob" type="text" id="dob"> </div> <div> <label for="country" class="label">Страна рождения</label> <select name="country" id="country"> <option value="">--Выберите одну--</option> <option value="russia">Россия</option> <option value="ukraina">Украина</option> <option value="belorussia">Белоруссия</option> <option value="other">Другая</option> </select> </div> <div> <label for="comments" class="label">Комментарии</label> <textarea name="comments" cols="15" rows="5" id="comments"></textarea> </div> <div class="label">Вы хотите получать нашу рассылку? </div> <div> <input type="radio" name="spam" id="yes" value="yes"> <label for="yes">Да</label> <input type="radio" name="spam" id="definitely" value="definitely"> <label for="definitely">Конечно</label> <input type="radio" name="spam" id="ofcurse" value="ofcurse"> <label for="ofcurse">С удовольствием</label> </div> <div> <input type="submit" name="submit" id="submit" value="Отправить"> </div> </form> </div> </body> </html>

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

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

2. Итак, создайте файл таблицы стилей. Я назову его «form.css» и помещу в тот же каталог, что и мой html-файл. Как я уже говорила, файл таблицы стилей уже подключен к html-файлу. Осталось прописать туда стили. Я не буду слишком изощряться со стилями, просто сделаю так, чтобы страница выглядела нормально, но Вы, конечно же, можете прописать такие стили, которые нравятся Вам.

body{width:960px; margin:0 auto; background:#699} .main{width:600px; margin:0 auto; text-align:right; padding-right:400px;} .main h1, label{font-family:Arial, Helvetica, sans-serif; color:#fff} form div{margin-bottom:10px;} .label{font-family:Arial, Helvetica, sans-serif; color:#333; font-weight:600}

После этого моя страничка будет выглядеть вот так:

веб-форма для верификации

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

Эти файлы Вы можете найти в папке с исходниками (впрочем, как и все остальные файлы этого урока). Найдите в папке файлы «jquery-1.6.3.min.js» и «jquery.validate.min.js» и поместите их в свою папку.

Теперь вернитесь в html-файл и после подключения файла таблицы стилей подключите эти два файла, а также создайте свой файл javascript, в котором мы будем писать наш код и также подключите его (в примере у этого файла имя «form.js»).

<script src="jquery-1.6.3.min.js"></script> <script src="jquery.validate.min.js"></script> <script src="form.js"></script>

4. Переходим в созданный нами файл «form.js» и пропишем там следующий код:

$(document).ready(function() { $('#signup').validate(); });

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

Однако, верификация не произойдет, пока мы не зададим кое-какие правила.

Для этого нам нужно вернуться в html-файл, найти код для поля ввода имени и добавить ему атрибуты «class» и «title». В атрибуте «class» мы сообщим плагину Validation о том, что это поле обязательно для заполнения (class="required"), а в атрибуте «title» укажем то сообщение об ошибке, которое должен увидеть пользователь не заполнивший это поле.

Таким образом, измененное поле для ввода имени будет выглядеть вот так:

<input name="name" type="text" id="name" class="required" title="Введите Ваше имя">

А если мы оставим поле имени пустым и нажмем на кнопу «Отправить», то увидим следующее:

верификация поля для ввода имени

Пока что сообщение об ошибке выглядит немного криво, но в конце мы это поправим.

5. Найдите поле для ввода даты рождения и добавьте для него также атрибуты «class» и «title», чтобы оно выглядело следующим образом:

<input name="dob" type="text" id="dob" class="date required" title="Введите дату рождения в формате: 01/01/2000">

Здесь ошибка будет появляться если пользователь не ввел дату, либо ввел ее в неверном формате.

верификация поля даты

Также найдите код для открывающего тега «select» и пропишите для него атрибуты «class» и «title», чтобы сделать выбор обязательным.

<select name="country" id="country" class="required" title="Выберите страну">

верификация для тега select

6. Как видите все просто. Но давайте поговорим о такой ситуации, когда нужно два разных сообщения для одного поля. Например, пользователь может не ввести адрес электронной почты – и тогда нужно вывести одно сообщение, или ввести некорректный адрес – и тогда нужно вывести другое сообщение об ошибке. Так же дела обстоят и с паролем, например, пользователь может не ввести пароль вообще, или ввести меньшее число символов, чем требуется.

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

Для этого вернемся в файл «form.js» и немного преобразуем наш код.

Внутри круглых скобок функции «validate» поставим открывающую и закрывающую фигурные скобки. А между ними создаем объект «rules», который будет заполняться именами полей и методами верификации.

Между фигурными скобками объекта «rules» мы создадим объектную константу. Первая часть «email» является именем поля проверки (оно совпадает с именем поля в html-коде). А далее указываются два метода верификации: обязательность заполнения поля и соответствие формату электронного адреса.

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

$(document).ready(function() { $('#signup').validate({ rules:{ email:{ required:true, email:true } }//конец rules });//конец validate });//конец ready

Если теперь мы попробуем ввести в форму электронный адрес неверного формата или не ввести его вообще, то увидим разные сообщения ошибок.

верификация e-mail

Проблема только в том, что сообщения Вы увидите на английском языке. Но это легко поправить.

Для этого после закрывающей фигурной скобки объекта «rule» создадим еще один объект с именем «messages». Этот объект будет содержать сообщения, которые Вы пожелаете вывести при той или иной ошибке. Таким образом код примет следующий вид:

$(document).ready(function() { $('#signup').validate({ rules:{ email:{ required:true, email:true } },//конец rules messages:{ email:{ required: "Введите адрес электронной почты", email: "Вы ввели некорректный e-mail" } }//конец messages });//конец validate });//конец ready

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

валидация формы на лету

7. То же самое можно проделать и для поля с паролем, установив условия, чтобы пароль был обязательно введен, и чтобы он был от 4 до 8 символов; а также для поля подтверждения пароля – чтобы значение совпадало со значением из поля пароля.

Для этого в «rules» после объектной константы «email» мы поставим запятую и создадим еще две объектные константы: одна для поля пароля, а вторая для поля подтверждения пароля. И также внутри указываем методы верификации: для поля пароля мы указываем, что оно должно быть обязательно заполнено и значение должно быть от 4 до 8 символов; для поля подтверждение пароля указываем, что его значение должно совпадать со значением в поле пароля.

Ниже приведен дополненный код для объекта «rules».

rules:{ email:{ required:true, email:true }, password:{ required:true, rangelength:[4,8] }, confirm_password:{ equalTo:'#password' } },//конец rules

Теперь, если мы проверим нашу страницу, заведомо введя не удовлетворяющие условиям данные, то увидим соответствующие сообщения.

верификация поля пароля

Но, опять же, Вы можете увидеть, что сообщения об ошибках на английском языке. Но мы уже знаем, как это исправить. Нам просто нужно добавить соответствующие объектные константы в объект «messages». Ниже приведен дополненный код для этого объекта.

messages:{ email:{ required: "Введите адрес электронной почты", email: "Вы ввели некорректный e-mail" }, password:{ required: "Вы не ввели пароль", rangelength:"Пароль должен содержать от 4 до 8 символов" }, confirm_password:{ equalTo:"Пароли не совпадают" } }//конец messages

А вот и результаты наших трудов:

верификация паролей. Вывод ошибок на русском языке

8. Мы уже научились проверять различные поля и даже выводить разные сообщения об ошибках в зависимости от типа ошибки. Осталось только проверить чекбоксы и радиокнопки.

Начнем с чекбоксов.

Сейчас Вы можете вернуться в Ваш html-файл, так как правила верификации мы будет прописывать в нем, путем присвоения атрибутов «class» и «title». Вы можете подумать, что эти атрибуты нужно прописать для всех элементов «input» наших чекбоксов (у нас их 3). Однако, достаточно прописать только для первого. В данном случае все чекбоксы имеют одинаковое имя (name=”hobby”), поэтому плагин Validation обрабатывает их как группу.

Итак, найдите html-код первого чекбокса и усовершенствуйте его следующим образом:

<input name="hobby" type="checkbox" id="sweeming" value="sweeming" class="required" title="Выберите как минимум один вариант">

Если мы ничего не отметим, то увидим сообщение об ошибке (сейчас оно выглядеть некрасиво, но скоро мы это поправим).

верификация чекбоксов

Все тоже самое и для радиокнопок. Найдите код первой радиокнопки и дополните его.

<input type="radio" name="spam" id="yes" value="yes" class="required" title="Выберите один вариант">

верификация радиокнопок

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

Одной из проблем является то, что сообщения об ошибках в радиокнопках и чекбоксах выводятся перед ними, но нам нужно, чтобы они выводились в другом месте (желательно под ними). Для этого вернитесь в наш файл «form.js» и после закрывающей фигурной скобки для объекта «messages» поставьте запятую и добавьте следующий код:

errorPlacement:function(error,element){ if(element.is(":radio")||element.is(":checkbox")){ error.appendTo(element.parent()); } else{ error.insertAfter(element); } }//конец errorPlacement

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

устанавливаем место для сообщений об ошибках

Уже лучше, но пока все равно не идеально. А для того, чтобы наши сообщения об ошибках выглядели соответствующим образом, откройте файл таблицы стилей «form.css» и добавьте следующие слили для сообщений об ошибках:

#signup label.error{ font-size:0.8em; color:#F00; font-weight:bold; display:block; margin-left:215px; }

А вот и результат: проверка формы во время ее заполнения

Ну вот, пожалуй, и все! Если у Вас возникли какие-то затруднения, то откройте файлы в исходниках и посмотрите код. Если возникли еще какие-то вопросы, то пишите в комментариях (кстати, можете писать там и свои отзывы :).

Если появилось желание изучать Javascript и jQuery, но не знаете с чего начать, то могу порекомендовать Вам очень хороший видеокурс от Евгения Попова «Javascript + jQuery для начинающих в видеоформате». Курс очень хорошо подойдет начинающим, содержит много полезной практики. В общем, можете кликнуть по ссылке и более подробно взглянуть, что в него входит и что он из себя представляет.

А я будут с Вами прощаться. Урок сегодня получился немного длинный, но я надеюсь, что он был полезен.

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

Также жду Ваших комментариев.

Успехов Вам друзья и спасибо всем тем, кто дочитал до конца : )

Вывод данных из базы MySQL в обратном порядке

Как зарегистрировать сайт в поисковых системах

Галерея изображений на Ваш сайт (jQuery)

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

Комментарий добавил(а): Олеся
Дата: 2014-02-27

Большое спасибо за подробное объяснение. Попробую применить при создании своего сайта.

Комментарий добавил(а): Админ
Дата: 2014-02-27

Всегда пожалуйста. Пользуйтесь на здоровье :)

Комментарий добавил(а): Юрий
Дата: 2014-03-02

Здравствуйте, Анна! Меня волнует один вопрос (может быть Вы мне поможите?): Есть форма PHP, есть обработчик формы, в котором вывод на экран текста "Сообщение отправлено успешно!". Вот вырезка кода: /* Выше результат вывода формы */ if ($result) { echo "<p><strong>Сообщение отправлено успешно!</strong></p>"; } else { echo "<p><strong>Сообщение НЕ отправлено!</strong></p>"; } Есть страничка с красиво оформленным сообщением, что оно успешно отправлено (и с картинкой) - thanks.html. Как сделать, чтобы на экран выводилось не текстовое сообщение (echo "<p><strong>Сообщение отправлено успешно!</strong></p>";), а содержимое страницы (или файла) thanks.html ? Объясните, пожалуйста. Юрий.

Комментарий добавил(а): Админ
Дата: 2014-03-02

Здравствуйте, Юрий!
Перенаправление на другую страницу Вы можете сделать при помощи функции "header".
Например, в Вашем случае это должно выглядеть так:
if ($result) {header( 'Location:http://путь до файла/thanks.html'); }
То есть, если значение для $result - правда, то Вы задаете перенаправление на Вашу страницу thanks.html.
Только учтите, что в этом случае Ваш php-файл-обработчик должен начинаться именно с

<?php.

Никаких тегов (типа body, либо каких-то других) в файле до функции быть не должно, иначе функция header не сработает - будут выдаваться ошибки.Это ее особенность (хотя, я думаю Вам эти теги в файле-обработчике и так не нужны, но все-таки решила предупредить).
Надеюсь у Вас все получится!

Комментарий добавил(а): Юрий
Дата: 2014-03-02

Спасибо Бооольшое, Анна! Все получилось!!! Заработало! А то я уже 2 дня бился над этим, никак не мог найти, как это сделать, и в интернете искал, и на форумах, и в справочниках... А ведь один раз, помню, мимо этой функции проходил, но в объяснениях, верно, ничего не понял... Еще раз Большое Вам Спасибо за помощь! Юрий.

Комментарий добавил(а): Админ
Дата: 2014-03-02

Всегда пожалуйста. Рада, что у Вас все получилось

Комментарий добавил(а): Юрий
Дата: 2014-03-03

Здравствуйте, Анна! У меня еще один вопрос завис еще прежде вышеизложенного. У формы есть 2 кнопки: одна - "Отправить", другая - "Сбросить". С первой все ясно: ее можно заменить на красивую кнопку-изображение. А нельзя ли также сделать и "Сбросить", как красивую кнопку, чтобы ее функция сброса осталась? У меня не получается! Юрий.

Комментарий добавил(а): Админ
Дата: 2014-03-03

Здравствуйте еще раз, Юрий!
Вы можете это сделать, использовав, например, для задания кнопки не <input>, а <button>.
Делается это так: в типе кнопки прописываете значение reset, а между тегами <button> вставляете нужное изображение.
<button id="submit" type="reset" value="Сбросить"><img src="путь к картинке.jpg" alt="кнопка"></button>
Теперь кнопка будет в виде той картини, путь к которой Вы зададите, а при нажатии будет очищать форму.

Комментарий добавил(а): Юрий
Дата: 2014-03-03

Кнопка появилась, сбрасывает, но вокруг нее какая-то рамка с фоном, которая никак не убирается ничем. Наводишь на нее мышкой, фон меняет цвет, а мышь не превращается в "руку". На кнопке "Отправить" этого нет. Вот такие эффекты: одна кнопка без лишней рамки, а другая с рамкой, которая не нужна, чтобы они были одинаковые..... Юрий.

Комментарий добавил(а): Юрий
Дата: 2014-03-03

Анна! Все работает. Я нашел, как убрать рамку и фон в ней. Спасибо за помощь! Юрий.

Комментарий добавил(а): Админ
Дата: 2014-03-03

Всегда пожалуйста! Обращайтесь.

Комментарий добавил(а): Сергей
Дата: 2014-06-08

Анна, здравствуйте. У меня вопрос по /class="date required"/ каким образом можно изменить форму ввода хх/хх/хххх на хх.хх.хххх и возможноли создать маску на дату. О! как.

Комментарий добавил(а): Владимир
Дата: 2014-12-22

Подскажите, а где настроить электронную почту, на которую отправляется форма?

Добавить Комментарий:


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: