Организовываем проверку формы во время ее заполнения
Бывало ли с Вами такое: Вы заполняете длинную форму, вроде бы все нормально, пытаетесь ее отправить и при отправке оказывается, что Вы где-то ошиблись. Теперь Вам нужно снова заполнять все поля формы из-за одной ошибки. Лично я в таких ситуациях начинаю сильно нервничать. Поэтому сегодня поговорим о том, как сделать, чтобы форма проверялась уже во время заполнения.
Верификация (процедура проверки правильности ввода информации) формы на стороне клиента помогает выявлять ошибки заполнения полей формы еще до начала ее отправки не сервер, что несомненно является очень удобной штукой (особенно если Ваша форма достаточно длинная, а пользователи ресурса немного нервные). Однако, сразу хочу сделать оговорку, что верификация на стороне клиента никоем образом не освобождает Вас от верификации на стороне сервера (это для Вашего же блага). В идеале – используйте и ту и другую.
Но давайте все-таки перейдем к созданию верификации на стороне клиента. Делать мы это будем при помощи JQuery и плагина Validation.
Проверка формы во время ее заполнения
1. Начнем мы, как обычно, с создания html-файла, в котором и пропишем код нашей формы. Я создам относительно длинную форму, в которой будут присутствовать различные поля, а также чекбоксы и радиокнопки. Делаю это для того, чтобы показать, как можно проверять разные типы информации.
Здесь каждый элемент формы заключен в отдельный тег div, будь то текстовое поле для ввода, блок радиокнопок, блок чекбоксов и т.д. Все остальное должно быть Вам понятно, если Вы когда-либо создавали формы в html.
В файле уже подключена таблица стилей, которую нам нужно создать, и в которой нужно прописать кое-какие основные стили, чтобы наша страница выглядела более или менее нормально.
2. Итак, создайте файл таблицы стилей. Я назову его «form.css» и помещу в тот же каталог, что и мой html-файл. Как я уже говорила, файл таблицы стилей уже подключен к html-файлу. Осталось прописать туда стили. Я не буду слишком изощряться со стилями, просто сделаю так, чтобы страница выглядела нормально, но Вы, конечно же, можете прописать такие стили, которые нравятся Вам.
После этого моя страничка будет выглядеть вот так:
3. Теперь, для того, чтобы мы могли реализовать валидацию нашей формы, первым делом нужно подключить файл библиотеки jQuery и плагин Validation.
Эти файлы Вы можете найти в папке с исходниками (впрочем, как и все остальные файлы этого урока). Найдите в папке файлы «jquery-1.6.3.min.js» и «jquery.validate.min.js» и поместите их в свою папку.
Теперь вернитесь в html-файл и после подключения файла таблицы стилей подключите эти два файла, а также создайте свой файл javascript, в котором мы будем писать наш код и также подключите его (в примере у этого файла имя «form.js»).
Этими строчками мы говорим, что нужно подождать пока загрузиться документ, потом выбираем нашу форму по идентификатору и применяем плагин для верификации.
Однако, верификация не произойдет, пока мы не зададим кое-какие правила.
Для этого нам нужно вернуться в html-файл, найти код для поля ввода имени и добавить ему атрибуты «class» и «title». В атрибуте «class» мы сообщим плагину Validation о том, что это поле обязательно для заполнения (class="required"), а в атрибуте «title» укажем то сообщение об ошибке, которое должен увидеть пользователь не заполнивший это поле.
Таким образом, измененное поле для ввода имени будет выглядеть вот так:
6. Как видите все просто. Но давайте поговорим о такой ситуации, когда нужно два разных сообщения для одного поля. Например, пользователь может не ввести адрес электронной почты – и тогда нужно вывести одно сообщение, или ввести некорректный адрес – и тогда нужно вывести другое сообщение об ошибке. Так же дела обстоят и с паролем, например, пользователь может не ввести пароль вообще, или ввести меньшее число символов, чем требуется.
Давайте посмотрим, как мы можем выводить разные сообщения для разных случаев.
Для этого вернемся в файл «form.js» и немного преобразуем наш код.
Внутри круглых скобок функции «validate» поставим открывающую и закрывающую фигурные скобки. А между ними создаем объект «rules», который будет заполняться именами полей и методами верификации.
Между фигурными скобками объекта «rules» мы создадим объектную константу. Первая часть «email» является именем поля проверки (оно совпадает с именем поля в html-коде). А далее указываются два метода верификации: обязательность заполнения поля и соответствие формату электронного адреса.
Посмотрите на преобразованный код и, я думаю, Вам станет более понятно:
Если теперь мы попробуем ввести в форму электронный адрес неверного формата или не ввести его вообще, то увидим разные сообщения ошибок.
Проблема только в том, что сообщения Вы увидите на английском языке. Но это легко поправить.
Для этого после закрывающей фигурной скобки объекта «rule» создадим еще один объект с именем «messages». Этот объект будет содержать сообщения, которые Вы пожелаете вывести при той или иной ошибке. Таким образом код примет следующий вид:
Если Вы попробуете отправить форму сейчас, намеренно допустив ошибку, то теперь увидите сообщение на русском языке, которое Вы сами и установили.
7. То же самое можно проделать и для поля с паролем, установив условия, чтобы пароль был обязательно введен, и чтобы он был от 4 до 8 символов; а также для поля подтверждения пароля – чтобы значение совпадало со значением из поля пароля.
Для этого в «rules» после объектной константы «email» мы поставим запятую и создадим еще две объектные константы: одна для поля пароля, а вторая для поля подтверждения пароля. И также внутри указываем методы верификации: для поля пароля мы указываем, что оно должно быть обязательно заполнено и значение должно быть от 4 до 8 символов; для поля подтверждение пароля указываем, что его значение должно совпадать со значением в поле пароля.
Ниже приведен дополненный код для объекта «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» поставьте запятую и добавьте следующий код:
Этот код проверяет, является ли элемент радиокнопкой или чекбоксом и, если является, то сообщения об ошибках помещаются в конец элемента, содержащего данный чекбокс или радиокнопку.
Уже лучше, но пока все равно не идеально. А для того, чтобы наши сообщения об ошибках выглядели соответствующим образом, откройте файл таблицы стилей «form.css» и добавьте следующие слили для сообщений об ошибках:
Ну вот, пожалуй, и все! Если у Вас возникли какие-то затруднения, то откройте файлы в исходниках и посмотрите код. Если возникли еще какие-то вопросы, то пишите в комментариях (кстати, можете писать там и свои отзывы :).
Если появилось желание изучать Javascript и jQuery, но не знаете с чего начать, то могу порекомендовать Вам очень хороший видеокурс от Евгения Попова . Курс очень хорошо подойдет начинающим, содержит много полезной практики. В общем, можете кликнуть по ссылке и более подробно взглянуть, что в него входит и что он из себя представляет.
А я будут с Вами прощаться. Урок сегодня получился немного длинный, но я надеюсь, что он был полезен.
Оставайтесь на связи, подписывайтесь на обновление блога и делитесь уроком через кнопки социальных сетей.
Также жду Ваших комментариев.
Успехов Вам друзья и спасибо всем тем, кто дочитал до конца : )
Большое спасибо за подробное объяснение. Попробую применить при создании своего сайта.
Комментарий добавил(а): Админ Дата: 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
Подскажите, а где настроить электронную почту, на которую отправляется форма?
Комментарий добавил(а): Олеся
Дата: 2014-02-27
Большое спасибо за подробное объяснение. Попробую применить при создании своего сайта.