Одно из главнейших достоинств PHP - то, как он работает с формами HTML. Здесь основным является то, что каждый элемент формы автоматически становится доступным вашим программам на PHP. Для подробной информации об использовании форм в PHP читайте раздел . Вот пример формы HTML:
Пример #1 Простейшая форма HTML
Ваше имя:
Ваш возраст:
В этой форме нет ничего особенного. Это обычная форма HTML без каких-либо специальных тегов. Когда пользователь заполнит форму и нажмет кнопку отправки, будет вызвана страница action.php . В этом файле может быть что-то вроде:
Пример #2 Выводим данные формы
Здравствуйте,
.
Вам
лет.
Пример вывода данной программы:
Здравствуйте, Сергей. Вам 30 лет.
Если не принимать во внимание куски кода с htmlspecialchars() и (int) , принцип работы данного кода должен быть прост и понятен. htmlspecialchars() обеспечивает правильную кодировку "особых" HTML-символов так, чтобы вредоносный HTML или Javascript не был вставлен на вашу страницу. Поле age, о котором нам известно, что оно должно быть число, мы можем просто преобразовать в integer , что автоматически избавит нас от нежелательных символов. PHP также может сделать это автоматически с помощью расширения filter . Переменные $_POST["name"] и $_POST["age"] автоматически установлены для вас средствами PHP. Ранее мы использовали суперглобальную переменную $_SERVER , здесь же мы точно так же используем суперглобальную переменную $_POST , которая содержит все POST-данные. Заметим, что метод отправки (method) нашей формы - POST. Если бы мы использовали метод GET , то информация нашей формы была бы в суперглобальной переменной $_GET . Кроме этого, можно использовать переменную $_REQUEST , если источник данных не имеет значения. Эта переменная содержит смесь данных GET, POST, COOKIE.
15 years ago
According to the HTTP specification, you should use the POST method when you"re using the form to change the state of something on the server end. For example, if a page has a form to allow users to add their own comments, like this page here, the form should use POST. If you click "Reload" or "Refresh" on a page that you reached through a POST, it"s almost always an error -- you shouldn"t be posting the same comment twice -- which is why these pages aren"t bookmarked or cached.
You should use the GET method when your form is, well, getting something off the server and not actually changing anything. For example, the form for a search engine should use GET, since searching a Web site should not be changing anything that the client might care about, and bookmarking or caching the results of a search-engine query is just as useful as bookmarking or caching a static HTML page.
1 year ago
Worth clarifying:
POST is not more secure than GET.
The reasons for choosing GET vs POST involve various factors such as intent of the request (are you "submitting" information?), the size of the request (there are limits to how long a URL can be, and GET parameters are sent in the URL), and how easily you want the Action to be shareable -- Example, Google Searches are GET because it makes it easy to copy and share the search query with someone else simply by sharing the URL.
Security is only a consideration here due to the fact that a GET is easier to share than a POST. Example: you don"t want a password to be sent by GET, because the user might share the resulting URL and inadvertently expose their password.
However, a GET and a POST are equally easy to intercept by a well-placed malicious person if you don"t deploy TLS/SSL to protect the network connection itself.
All Forms sent over HTTP (usually port 80) are insecure, and today (2017), there aren"t many good reasons for a public website to not be using HTTPS (which is basically HTTP + Transport Layer Security).
As a bonus, if you use TLS you minimise the risk of your users getting code (ADs) injected into your traffic that wasn"t put there by you.
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали о том, что такое сериализация в php . В данной статье я бы хотел рассказать о том, как работать с формами в PHP
. Язык PHP предназначен для программирования web-сценариев, и обработка форм занимает, пожалуй, самое главное место в этом процессе. Сейчас уже и не встретить сайтов, на которых не было бы, к примеру, регистрации или формы обратной связи, или опросника. Форумы, интернет-магазины, добавление комментария, отправка сообщения в социальной сети — всё это обработка данных, помещенных в поля формы. Давайте на примере разберемся, как обрабатывать формы на PHP
.
Будем реализовывать простую задачу: необходимо создать 2 поля (имя и фамилия), передать эти данные скрипту action.php
, в результате должно выйти приветствие "Добро пожаловать, фамилия имя"
. Кто забыл, как создаются формы, и какие там есть поля, можно посмотреть . Создадим файл test.html
:
Имя: Фамилия:
Обращаю ваше внимание, что файл action.php (в нашем случае) должен находиться в одной папке с файлом test.html . Тут можно указывать как относительные, так и абсолютные пути. Будьте внимательны, многие ошибки связаны с неправильным указанием пути до скрипта-обработчика формы.
Создадим файл action.php со следующим содержимым:
Если мы сейчас откроем файл test.html , заполним поля формы и нажмём на кнопку, то попадём в файл action.php , где будет выведено сообщение. В данном случае браузер обращается к скрипту action.php и передает ему, через знак "?" все значения атрибутов name , расположенных внутри тегов , разделенных символом & . Обратите внимание, что подставляется вместо $_SERVER .
Нашу задачу мы можем решить, разобрав строку QUERY_STRING с помощью стандартных функций по работе со строками в PHP, но лучше воспользоваться другим механизмом — это использование массива $_REQUEST . Все данные, которые получены из полей формы, PHP помещает в массив $_REQUEST, не зависимо от того, каким способом были переданы данные: POST или GET (узнать можно через $_SERVER["REQUEST_METHOD"] ). Напоминаю чем эти способы отличаются:
Метод GET является открытым, метод POST является закрытым, т.е. они отличаются способом передачи параметров. Пример:
1) Если мы используем метод post: mysite.ru/request.php.
2) Если мы используем метод get: mysite.ru/request.php?myname=»Alex»&surname=»Gulynin».
Также, помимо массива $_REQUEST, PHP создаёт массивы $_GET и $_POST . Давайте теперь реализуем нашу задачу, на основе полученных знаний:
Если мы сейчас заполним форму и нажмём на кнопку, то увидим, что скрипт action.php приветствует нас по фамилии и имени. Всё работает корректно.
Здесь всё хорошо, но если мы изменим название скрипта, то нужно будет вносить изменения в файл test.html . Давайте модифицируем файл action.php, так, чтобы, обращаясь к нему либо выводилась форма, когда мы ничего не отправили, либо приветствие, когда мы нажали кнопку:
2. Кнопка сброса формы (Reset)
При нажатии на кнопку сброса (reset
), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.
РНР
-сценарий не требуется.
Флажки checkbox предлагают пользователю ряд вариантов, и разрешает произвольный выбор (ни одного, одного или нескольких из них).
Белый
Зеленый
Синий
Красный
Черный
Пример 2.
// первый набор кнопок
// второй набор кнопок
// третий набор кнопок
При создании обычного текстового поля размером size и максимальной допустимой длины maxlength
символов, атрибут type принимает значение text
. Если указан параметр value
, то поле будет отображать указанный в переменной value. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.
6. Поле для ввода пароля (password)
Полностью аналогичен текстовому полю, за исключением того, что символы, набираемые пользователем, не будут отображаться на экране.
7. Скрытое текстовое поле (hidden)
Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.
8. Выпадающий список (select)
Тэг
представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк. Но будет передано значение последней выбранной кнопке.
Список начинается с парных тегов
. Теги
позволяют определить содержимое списка, а параметр value
определяет значение строки. Если в теге
указан параметр selected
, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size
равен 1
, то список будет выпадающим. Если указан атрибут multiple
, то разрешено выбирать несколько элементов из списка. Но эта схема практически не используется, а при size = 1
не имеет смысла.
Белый Зеленый Синий Красный Черный
Если необходимо создать выпадающий с предсказуемой последовательностью. Например, список с годами с 2000 по 2050. То используется следующий прием.
9. Многострочное поле ввода текста (textarea)
Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. При необходимости можно указать атрибут readonly
, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами
.
Существует параметр wrap
– задание переноса строк. Возможные значения:
off
– отключает перенос строк;
virtuals
– показывает переносы строк, но отправляет текст как он введен;
physical
– переносы строк оставляются в исходном виде.
По умолчанию тег
создает пустое поле шириной в 20
символов и состоящее из 2
строк.
Для того, чтобы в многострочном текстовом поле соблюдалось html-форматирование (перенос строк по средством тега
или
), то используйте функцию nl2br()
:
Первоначально вставленный строка 1 Первоначально вставленный строка 2 Первоначально вставленный строка 3
10. Кнопка для загрузки файлов (browse)Служит для реализации загрузки файлов на сервер. При создании текстового поля также необходимо указать тип поля type
как "file"
.
Загрузить файл:
Способов, предоставляемых протоколом HTTP
, немного. Это важная информация. Никаких других способов нет. На практике используются два:
GET
– это когда данные передаются в адресной строке, например, когда пользователь жмет ссылку.
POST
– когда он нажимает кнопку в форме.
Чтобы передать данные методом GET
не надо создавать на HTML
-странице форму (использовать формы для запросов методом GET
вам никто не запрещает) – достаточно ссылки на документ с добавлением строки запроса, которая может выглядеть как переменная=значение. Пары объединяются с помощью амперсанда &, а к URL
страницы строка присоединяется с помощью вопросительного знака «?
».
Но можно не использовать пары ключ=значение, если надо передать всего одну переменную – для этого надо после знака вопроса написать ЗНАЧЕНИЕ
(не имя) переменной.
Преимущество
передачи параметров таким способом заключается в том, что клиенты, которые не могут использовать метод POST
(например, поисковые машины), все же смогут, просто пройдя по ссылке, передать параметры скрипту и получить содержимое.
Недостаток
в том, что просто изменив параметры в адресной строке, пользователь может повернуть ход сценария непредсказуемым образом и это создает огромную дыру в безопасности, в сочетании с неопределенными переменными и register_globals on
или кто-нибудь может узнать значение важной переменной (например ID
-сеcсии), просто посмотрев на экран монитора.
:
- для доступа к общедоступным страницам с передачей параметров (повышение функциональности)
- передача информации, не влияющей на уровень безопасности
:
- для доступа к защищенным страницам с передачей параметров
- для передачи информации, влияющей на уровень безопасности
- для передачи информации, не подлежащей модифицированию пользователем (некоторые передают текст SQL
-запросов.
Передать данные методом POST
можно только с помощью формы на HTML
странице. Основное отличие POST
от GET
в том, что данные передаются не в заголовке запроса а в теле, следовательно, пользователь их не видит. Модифицировать можно только изменив саму форму.
Преимущество
:
- большая безопасность и функциональность запросов с помощью форм методом POST
.
Недостаток
:
- меньшая доступность.
Для чего следует использовать
:
- для передачи большого объема информации (текст, файлы..);
- для передачи любой важной информации;
- для ограничения доступа (например, использовать для навигации только форму – возможность, доступная не всем программам-роботам или грабберам-контента).
Для чего не следует использовать
:
PHP
способен принимать файл, загружаемый при помощи любого браузера,. Это дает возможность загружать как текстовые, так и бинарные файлы. Вместе с PHP
-аутентификацией и функциями для работы с файловой системой, вы получаете полный контроль над тем, кому разрешено загружать файлы, и над тем, что делать с файлом после его загрузки.
Страница для загрузки файлов может быть реализована при помощи специальной формы, которая выглядит примерно так:
//Форма для загрузки файлов Отправить этот файл:
В приведенном выше примере "URL
"
необходимо заменить ссылкой на PHP
-скрипт. Скрытое поле MAX
_FILE_SIZE
(значение необходимо указывать в байтах) должно предшествовать полю для выбора файла, и его значение является максимально допустимым размером принимаемого файла. Также следует убедиться, что в атрибутах формы вы указали enctype="multipart/form-data"
, в противном случае загрузка файлов на сервер выполняться не будет.
Внимание
Опция MAX
_FILE_SIZE
является рекомендацией браузеру, даже если бы PHP
также проверял это условие. Обойти это ограничение на стороне браузера достаточно просто, следовательно, вы не должны полагаться на то, что все файлы большего размера будут блокированы при помощи этой возможности. Тем не менее, ограничение PHP
касательно максимального размера обойти невозможно. Вы в любом случае должны добавлять переменную формы MAX
_FILE_SIZE
, так как она предотвращает тревожное ожидание пользователей при передаче огромных файлов, только для того, чтобы узнать, что файл слишком большой и передача фактически не состоялась.
Напрямую:
Getenv("REQUEST_METHOD");
вернет GET или POST .
Какой способ следует применять?Если форма служит для запроса некой информации, например – при поиске, то ее следует отправлять методом GET
. Чтобы можно было обновлять страницу, можно было поставить закладку и/или послать ссылку другу.
Если же в результате отправки формы данные записываются или изменяются на сервере, то следует их отправлять методом POST
, причем обязательно, после обработки формы, надо перенаправить браузер методом GET
. Так же, POST
может понадобиться, если на сервер надо передать большой объём данных (у GET
он сильно ограничен), а так же, если не следует "светить" передаваемые данные в адресной строке (при вводе логина и пароля, например).
В любом случае, после обработки POST
надо всегда перенаправить браузер на какую-нибудь страницу, пусть ту же самую, но уже без данных формы, чтобы при обновлении страницы они не записывались повторно.
Пример, для демонстрации отправки данных методом POST и GET одновременно и получения ответа от сервера.
What You"ll Be Creating
В этой инструкции я собираюсь пошагово рассказать о том, как создать рабочую контактную форму, с использованием самого популярного фреймворка для фронт-энда Bootstrap в комбинации с AJAX и PHP. Также здесь мы рассмотрим некоторые дополнительные возможности, как например, некоторые причудливые CSS-анимации с помощью листа стилей animate.css, последующую проверку формы через Javascript и улучшение общего впечатления конечных пользователей с помощью асинхронного контента.
На момент написания самой свежей версией фреймворка был Bootstrap 3.3.5 и стоит отметить, что в данной инструкции будет использоваться обычная сборка с двенадцатью колонками. В процессе чтения этой инструкции убедитесь, что используете самые последние фрагменты и части кода, как это показано в документации к Bootstrap .
Примерная структура файлов и папокПервым делом, мы создаем корневую директорию и помещаем в нее следующие файлы и папки:
Bootstrap-Form: ├── css/ ├── images/ ├── js/ ├── scripts.js ├── php/ ├── process.php ├── index.html
Нам будет нужно добавить несколько фронт-энд библиотек, которые нам помогут, так что не стесняемся и качаем (или добавляем внешние ссылки на следующие из них:
Предположим, что мы их скачали в локальное хранилище и положили в папку проекта, файловая структура нашего проекта теперь будет выглядеть так:
Bootstrap-Form: ├── css/ ├── bootstrap.min.css ├── images/ ├── js/ ├── scripts.js ├── bootstrap.js ├── jquery-1.11.2.min.js ├── php/ ├── process.php ├── index.html
Задание Основ ФормыОткрываем index.html, копируем следующую базовую структуру HTML:
Contact form using Bootstrap 3.3.4 " Send me a message
Это наш базовый HTML шаблон, на основе которого мы будем создавать содержимое формы. Вы можете видеть, что мы связали все необходимые файлы CSS и JavaScript (обратите внимание, что для этого конкретного примера нам не нужен bootstrap.js). Мы включили для облегчения работы с медиа запросами в Bootstrap. JavaScript был прописан в нижней части файла, чтобы сначала загрузилась основная часть формы.
Внутри тега body мы включили div с классом col-sm-6 col-sm-offset-3 . Это в основном означает, что на маленьких экранах sm (small) мы хотим отобразить столбец шириной 50% (максимум 12 столбцов). Класс col-sm-offset-3 добавляет отступ слева 25%, создавая таким образом макет, который занимает половину доступного экрана и выровнен по центру. Здесь мы добавили тег h3 , и это начало основы нашей формы. Убедитесь, что вы применили ID к этой форме, чтобы мы могли позднее связать событие jQuery.
Кто не рискует, тот не пьет шампанскоеСоздавая элементы формы мы можем скопировать/вставить или написать следующий код в тегах :
Name Email Message Submit Message Submitted!
Пользователь будет взаимодействовать со всеми этими полями и кнопками. Родительский div с присвоенным классом row - классический Bootstrap синтаксис, создает строку из элементов col. Столбцы в Bootstrap создают внутренние отступы или интервалы - добавление строки вокруг них приведет к удалению отступов слева и справа и столбцы идеально вписываются в основной контейнер.
Мы создали два столбца с классом col-sm-6 (50%), который мы будем использовать для разделения нашей формы. В первом столбце col-sm-6 мы создали метку и поле для имени, во втором столбце поле для электронной почты. Каждый из них включает метку с соответствующим атрибутом for , ссылающийся на соответствующее поле. Каждый из этих столбцов заключен в класс form-group который семантически группирует метку и поле вместе и также добавляет маленький внешний отступ снизу.
ТипографикаBootstrap позволяет вам использовать классы заголовков H1-H6. Эти классы помогают нам использовать строчные элементы без добавления дополнительных отступов или создания блочных элементов. Мы применили класс H4 к меткам, быстро увеличив их размер и сделав их более понятными.
Класс form-control применяемый к каждому полю ввода, позволяет ему охватывать всю длину контейнера (100%). Он также добавляет различные стили, улучшающие читаемость текста (увеличивая высоту текста, добавляя рамку и т.д.).
После этих столбцов мы добавляем текстовое поле сообщения. Опять же, мы заключаем это внутри класса form-group и применяем похожие стили к нашей метке и текстовому полю, как мы это делали раньше.
Призыв к действиюИ наконец, мы добавляем кнопку. В Bootstrap имеется несколько классов для разных кнопок с различными цветами и состояниями. Мы решили использовать кнопку "успех" (btn-success), которая по умолчанию имеет зеленый цвет. Кроме того, нам необходимо добавить класс btn для сброса стандартных стилей кнопки (граница, отступы, выравнивание текста, насыщенность шрифта). Мы применили класс btn-lg который увеличивает кнопку и наконец класс pull-right для выравнивания кнопки по правому краю.
После нашей кнопки мы добавили div с идентификатором #msgSubmit и применили следующие классы: " h3 text-center hidden ". h3 создает более крупный заголовок, text-center (как вы уже догадались) делает выравнивание текста по центру, и, наконец, мы установили класс hidden , который устанавливает оба свойства, display в значение none и свойство visibility в значение hidden (display: none; visibility: hidden;).
Добавляем функцию отправкиКак вы можете видеть это в своем браузере, мы создали основу Bootstrap формы. Но пока она абсолютно ничего не делает. Следующим шагом будет создание функции, которая принимает входные данные пользователей и отправляет их асинхронно в наш класс PHP mailer.
Откройте scripts.js и скопируйте следующий код:
$("#contactForm").submit(function(event){ // cancels the form submission event.preventDefault(); submitForm(); });
Этот кусок кода является jQuery фрагментом, который принимает функцию отправки в нашем id #contactForm (как задано ранее). По этой функции мы парсим переменную event , в которой хранится действие отправки формы в функцию. Событие event.preventDefault(); останавливает отправку данных формы, как обычно, чтобы обновить страницу, поскольку не задано действие формы. Наконец, вызывается функция submitForm(); .
submitForm();Затем мы создадим функцию submitForm(); :
Function submitForm(){ // Initiate Variables With Form Content var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); $.ajax({ type: "POST", url: "php/form-process.php", data: "name=" + name + "&email=" + email + "&message=" + message, success: function(text){ if (text == "success"){ formSuccess(); } } }); } function formSuccess(){ $("#msgSubmit").removeClass("hidden"); }
Три переменные содержат значения всех входных данных из формы и присваивают их переменной JavaScript, которая будет использована позднее.
Инициализируем AJAX объект в jQuery и устанавливаем тип запроса post , URL– ссылка на PHP файл, данные которые мы хотим отправить, и при успешной отработке срабатывает функция success. Данные включают все три объединенные переменные с соответствующим идентификатором/меткой. Функция обратного вызова вызывается, когда объект Ajax успешно получает информацию из сценария PHP. Функция сравнивает возвращаемый текст и проверяет, равен ли он строке "success". Если все верно, то запускается функция formSuccess .
Функция formSuccess удаляет класс hidden из div с id #msgSubmit , который мы применили ранее, тем самым показывая текст.
Подключаем PHP функцию mailНам осталось написать PHP скрипт для получения данных и отправки нашей информации с помощью встроенной php функции mail. Откройте process.php и добавьте следующий код:
Похоже на фрагмент кода JQuery выше, мы создаем и храним переменные, которые мы хотим использовать. Из функции post мы получаем три input переменные и записываем их значения в такие же переменные PHP. Переменная $EmailTo – заранее определенный email адрес, который указывается в скрипте и отправляется на вашу почту из формы. $Subject – это строка, которая используется в качестве темы письма.
Основа сообщения создается из трех переменных. Сначала указывается от кого сообщение “Name:”, затем добавляется символ перехода на новую строку /n . (новая строка/разрыв строки). Это повторяется и объединяется с переменной $body .
Чтобы окончательно отправить сообщение мы пишем функцию отправки сообщения. В переменную $success мы возвращаем результат отправки, в которую входит: получатель, тема, основной текст и отправитель.
Чтобы инициировать процесс отправки электронной почты, мы можем вызвать его в операторе if . Это также помогает проверить прошло ли всё успешно или нет. Если функция mail вернула значение “true”, скрипт вернет значение “success”, а если false соответственно “invalid”.
Данный результат будет возвращен в AJAX объект и обработан обратно на стороне клиента. Красота AJAX заключается в том, что все это выполняется асинхронно на клиентской стороне, позволяя клиенту пользоваться сайтом во время отправки сообщения.
Идеальный порядокРассмотрев основную структуру и функциональные возможности нашей формы в первой половине этого урока, мы теперь поговорим о том, как обеспечить обратную связь с пользователями с помощью различных дополнительных функций, которые мы можем добавить. В частности, мы рассмотрим форму обратной связи через обработку ошибок, как на стороне клиента, так и на стороне сервера.
Еще раз, для валидации формы мы будем использовать некоторые инструменты. К ним относятся:
Добавьте их также в проект, как мы делали ранее с Bootstrap и jQuery. Эти инструменты помогут обеспечить обратную связь с пользователем при отправке формы. Существует множество инструментов и фреймворков для проверки форм (включая встроенный HTML5 валидатор), но я использовал «Bootstrap Validator», так как он прекрасно интегрируется с нашей текущей формой.
Теперь структура проекта должна выглядеть примерно так:
Bootstrap-Form: ├── css/ ├── bootstrap.min.css ├── animate.css ├── images/ ├── js/ ├── scripts.js ├── bootstrap.js ├── jquery-1.11.2.min.js ├── validator.min.js ├── php/ ├── process.php ├── index.html
Проверка нашей формыНачнем с создания валидатора, чтобы проверить форму при нажатии кнопки. Вернемся к файлу scripts.js , нам нужно отредактировать первый кусок кода, который вызывает функцию submitForm() , когда форма отправлена.
Теперь код выглядит так:
$("#contactForm").validator().on("submit", function (event) { if (event.isDefaultPrevented()) { // handle the invalid form... } else { // everything looks good! event.preventDefault(); submitForm(); } });
Этот новый фрагмент кода проверяет, нашел ли Bootstrap Validator какие-то ошибки и остановил процесс. Если это не так, мы продолжим. Нам все равно нужно предотвратить действие по умолчанию (обновление страницы) при успешной отправке формы, поэтому сохраним это.
Теперь, при нажатии на кнопку отправки формы, когда она не заполнена полностью, сработает проверка правильности заполнения формы и поля будут выделены красным цветом, показывая, что нужно вводить, это просто!
В процессе добавления этой проверки мы удалили или запретили нативную HTML5 проверку. Можно улучшить нашу валидацию, включив сообщения об ошибках. В Bootstrap Validator есть отличная функция, позволяющая довольно легко отображать сообщения об ошибках возле каждого поля ввода. Чтобы добавить ее, необходимо написать дополнительный HTML-код.
В каждой form-group под полями ввода необходимо разместить следующий html-код:
Например, вот дополнительный блок div, добавленный к полям Name и E-mail:
Name Email
Теперь при повторной отправке формы, если поля оставлены пустыми, по умолчанию, должно появляться сообщение об ошибке “Please fill in this field.” . Добавив атрибут “data-error” к полю ввода, вы можете добавить пользовательское сообщение об ошибке. Например:
Существует целый ряд других функций, таких как шаблоны регулярных выражений, которые можно применить к валидатору Bootstrap. Вы можете увидеть больше на Github .
Добавляем анимациюНаша клиентская валидация выглядит очень хорошо; у нас есть изящная подсветка пустых полей красным цветом. Однако было бы неплохо добавить в форму дополнительную анимацию и добавить дополнительные сообщения, позволяющие пользователю знать, что происходит. В настоящее время у нас есть сообщение "Message Submitted!", которое появляется при успешной отправке, но как насчет сообщения об ошибке?
Мы изменим наш код, чтобы он стал более универсальным, изменим успешное сообщение так, чтобы оно принимало и сообщения об ошибках.
Прежде всего, давайте удалим текст “Message Submitted!” из HTML-кода и просто оставим пустой блок div:
Теперь нам необходимо создать новую функцию для обработки статуса сообщения. Добавьте эту функцию в конец сценария scripts.js
Function submitMSG(valid, msg){ var msgClasses; if(valid){ msgClasses = "h3 text-center tada animated text-success"; } else { msgClasses = "h3 text-center text-danger"; } $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); }
Эта функция принимает два аргумента. valid будет булева [логическая] переменная: если это истина тогда показывается успешное сообщение, если ложь то показывается сообщение об ошибке. msg содержит сообщение для отображения в блоке div.
Во-первых, функция проверяет, имеет ли она успех или сообщение об ошибке, проверяя значение valid. В любом случае в переменную записываются необходимые имена CSS классов (нужно еще раз подключить h3 и text-center , так как позже мы удалим их по умолчанию).
Примечание : мы используем некоторые классы animate.css. Класс tada применит анимацию при успешной отправке сообщения.
Наконец, функция удаляет все классы из #msgSubmit (избегайте конфликтующих классов), затем добавляет классы, установленные ранее, а затем добавляет текст сообщения внутри элемента div .
В нашей форме валидации, которую мы обновили в начале этого раздела, мы можем добавить следующий вызов функции внутри оператора if , когда он равен true.
SubmitMSG(false, "Did you fill in the form properly?");
При отправке формы с пустыми полями должно появиться сообщение об ошибке “Did you fill in the form properly?"
Последним шагом для этой новой submitMSG функции - это вызвать ее при успешной отправке сообщения. Обновите функцию formSuccess() следующим образом:
$("#contactForm").reset(); submitMSG(true, "Message Submitted!")
Во-первых, мы хотим сбросить данные формы и очистить значения полей при успешной отправке, затем как и прежде, вызываем нашу функцию submitMSG. При успешной отправке теперь должно отображаться сообщение с эффектом анимации tada из animate.css .
ВстряскаЕще одна анимация, верно? Давайте добавим еще одну анимацию для всей формы при сообщении об ошибке, анимационное "дрожание" должно выглядеть очень хорошо!
Создайте новую функцию сразу после formSuccess() и назовите ее formError()
Function formError(){ $("#contactForm").removeClass().addClass("shake animated").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ $(this).removeClass(); }); }
Эта функция использует подход, найденный на демо странице animate.css, который позволяет добавить анимацию к элементу, а затем повторно вызывать/добавлять ее снова и снова. С CSS анимациями связана одна небольшая проблема, если один раз добавить анимацию к элементу и потом удалить стили, а затем добавить их по новой, то анимация не повториться. Эта функция помогает сбросить классы по завершению анимации, а затем позволяет повторно добавить их. Когда пользователь нажимает кнопку "Отправить" в не до конца заполненной форме, мы хотим, чтобы анимация дрожала. И в случае если форма все еще заполнена неправильно, нужно чтобы анимация также срабатывала снова.
Мы можем вызвать эту функцию formError() над функцией submitMSG() . К примеру:
FormError(); submitMSG(false, "Did you fill in the form properly?");
Теперь, когда мы отправляем пустую форму, она будет дрожать, чтобы пользователь знал, что что-то пошло не так.
Дополнительная проверкаВся эта проверка на стороне клиента выглядит отлично, однако любой пользователь может отключить эти меры и отправить форму с пустыми полями, отредактировав код в своем браузере. Поэтому стоит добавить валидацию на стороне сервера, чтобы записать все, что проскользнуло.
Откройте наш файл process.php , нам необходимо немного его изменить, добавить проверку на пустоту полей; Если они не пусты, отправляем сообщение обратно на front-end. Мы создадим переменную с именем $errorMSG , в которую будем записывать ошибки, а затем включим дополнительную проверку $_POST .
Этот PHP код проверяет, не пусты ли поля перед записью в соответствующие переменные (заменяет существующий код, устанавливая переменные из $_POST). Если они пустые, мы формируем базовое сообщение для отправки обратно клиенту. Мы можем проверять еще более тщательно, чем просто проверять поля на пустоту (если значение слишком короткое/длинное, то проверяем его регулярными выражениями) в PHP и JavaScript. Однако, ради простоты, мы ограничимся лишь проверкой на пустоту.
Необходимо вернуть сообщение в функцию AJAX, который будет отображаться в браузере. Мы отредактируем условие if , которое мы создали ранее в нижней части файла PHP.
В нашем условии if мы также проверяем не является ли переменная $errorMSG пустой (""), которую мы использовали в переменной $success . В нашем условии else мы включили дальнейшую проверку. Здесь просто проверка, если в переменную $success вернулся результат false, то возвращается “Something went wrong:(“. В противном случае отображаем сообщение, которое было скомпилировано при проверке на наличие пустых значений.
Последний шаг - принять новое сообщение в AJAX и отобразить его в форме. Нам нужно обновить объекта Ajax в файле scripts.js следующим образом:
$.ajax({ type: "POST", url: "php/form-process.php", data: "name=" + name + "&email=" + email + "&message=" + message, success: function(text){ if (text == "success"){ formSuccess(); } else { formError(); submitMSG(false,text); } } });
Мы только что обновили условие else , которое проверяет если text == success . В нашем else мы вызвали функцию formError() , которая активирует анимацию встряхивания, функция submitMSG() отображает текст сообщения из файла PHP. Возвращаемый текст будет либо “Something went wrong:(” , либо данные о пустых полях.
ЗаключениеПерейдите на Github , чтобы посмотреть на весь код, который мы написали!
Теперь наша форма обеспечивает обратную связь с пользователями и показывает, какие поля заполнены неправильно или пустые. В форме мы предоставили контекстные сообщения, основанные на статусе возвращенного значения из PHP файла и реализовали дополнительный уровень проверки на стороне сервера, вылавливая тех пользователей, которые захотели обойти front-end валидацию.
В целом теперь у вас на руках очень живая форма, готовая к стилизации и интеграции с вашим веб-сайтом. Надеюсь, вам понравился этот урок, пожалуйста, оставляйте любые вопросы и соображения в комментариях ниже!
