Создание простой контактной формы с помощью Angularjs и php. Как заставить работать атрибут required для input в старых версиях IE? 6 войти с помощью имя required
«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.
Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.
Следует понимать, что точные и правильные формулировки хотя и снижают вероятность возникновения ошибок, но никак не спасают от них. Только технические средства на стороне сервера позволяют получить требуемый результат и избежать ввода неправильной информации. Тем не менее, ревизия или, как её ещё называют, валидация на стороне клиента позволяет быстро проверить данные, вводимые пользователем, на корректность, без отправки формы на сервер. Таким образом экономится время пользователя и снижается нагрузка на сервер. С позиции юзабилити тоже имеются плюсы - пользователь сразу получает сообщение о том, какую информацию он указал неверно и может исправить свою ошибку.
Обязательное полеНекоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required , как показано в примере 1.
Пример 1. Атрибут required
HTML5 IE 10+ Cr Op Sa Fx
Обязательное поле
Логин:
Пароль:
Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.
Рис. 1. Обязательное поле не заполнено
Корректность данныхИсходно имеется два поля, в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Браузер Chrome также проверяет на корректность поле с календарными данными, но только потому, что у него не предусмотрен интерфейс выбора календаря щелчком мыши. Для этих элементов характерны следующие правила.
- Веб-адрес ( ) должен содержать протокол (http://, https://, ftp://).
- Адрес электронной почты ( ) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.
У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.
В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.
Пример 2. Корректность данных
HTML5 IE 10+ Cr Op Sa Fx
Корректность данных
Заполните форму (все поля обязательны)
Имя:
Email:
Сайт:
Opera проверяет элемент формы только при наличии атрибута name.
Что происходит в Opera при вводе неверных данных показано на рис. 2.
Рис. 2. Предупреждение о неправильных данных
Шаблон вводаНекоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern , а его значением выступает регулярное выражение . Некоторые типовые значения перечислены в табл. 1.
В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.
Пример 3. Шаблон ввода
HTML5 IE 10+ Cr Op Sa Fx
Ввод цвета
Введите шестнадцатеричное значение цвета (должно начинаться с #)
На рис. 3 показано предупреждение в браузере Chrome.
Рис. 3. Введённые данные не соответствуют шаблону
Отмена валидацииВалидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate тега . В примере 4 показано использование этого атрибута.
Пример 4. Отмена валидации
HTML5 IE 10+ Cr Op Sa Fx
Атрибут novalidate
Для аналогичной цели применяется и атрибут formnovalidate , который добавляется к кнопке для отправки формы, в данном случае к тегу . В этом случае форма из примера 4 будет иметь следующий вид.
П ривет, ребята надеются дела идут хорошо, сегодня мы будем объяснять очень полезный учебник вместе с вами. На сегодняшнем уроке мы создадим простую контактную форму, используя angularJS и php.
Контактная форма представляет собой стандартную веб-страницу, которая доступна на каждом сайте. Это позволяет посетителям сайта связаться с владельцами сайтов или поставщиками услуг, которые отвечают за поддержание этого веб-сайта. Так что мы думаем, почему бы не создать простую контактную форму с помощью Angularjs и php, чтобы получать сообщения от веб-сайтов, читателей и/или пользователей.
Мы используем Angularjs для переднего плана и php на стороне сервера. Мы будем писать код на php, который принимает данные из Angular формы и отправляет по электронной почте администратору сайта. Создайте папку с именем “contact-form” в вашем веб-каталоге приложений и создайте образец оформления страницы HTML – index.html. Теперь скопируйте и вставьте, код ниже в файл index.html.
Демо - Простая контактная форма с помощью Angularjs и php Контактная форма с помощью angularjs и PHP Ваше имя Почта Сообщение Отправить
Php код для отправки электронной почтыСоздайте страницу contact.php и скопируйте вставить код, приведенный ниже. Ниже приведен php-код, который будет извлекать данные из angular формы и отправлять по электронной почте, по указанному адресу электронной почты.
< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->name; echo "Email: " . $data->email; echo "Message: " . $data->message; // sned an email $to = $data->email; $subject = "Тестовое письмо сайт для тестирования angularjs контактной формы"; $message = $data->message; $headers = "From: " . $data->name .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpversion(); //функция PHP mail для отправки электронной почты на адрес электронной почты mail($to, $subject, $message, $headers); ?>
Для любого web-разработчика пока нет более серьезной проблемы, как полная кроссбраузерность его продукта. Наверное, это одна из основных задач хорошего специалиста: добиться того, чтобы его сайт всегда правильно отображался во всех браузерах.
Параметр required , который иногда используется для input, не работает в древних IE, что просто нельзя так оставить. Пользователи-пенсионеры, которые до сих пор пользуются IE6 должны одинаково легко работать с вашим сайтом, наряду с пользователями Google Chrome последней версии. Кто, кроме web-разработчиков, о них может позаботиться.
О наболевшем, о Internet ExplorerДля нормальных браузеров, к которым можно отнести Firefox, Opera и Google Chrome, эта задача относительно легка. Даже давние версии этих браузеров одинаково хорошо отображают html-код, если в нем конечно же не используются какие-то новые технологии. Но чтобы добиться подобного в браузерах семейства Internet Explorer, требуются просто титанические усилия.
Каждая версия браузера Internet Exlorer обладает своей, уникальной тупостью. Что работает в IE6, может как положено не работать в IE7 и наоборот. Этот зоопарк компании Microsoft не удалось побороть даже в самой последней версии своего браузера.
Понять почему разработчики браузеров не могут просто взять открыть и почитать стандарты W3C для сайтостроения, я не могу.
Поэтому мне, как web-разработчику, приходится выступать некоторой «прослойкой» между капризными браузерами и требующими знаний и зрелищ посетителями сайтов. И замечательно, что web-разработчикам пока это удается.
Дак, как же заставить работать required в старых версиях IE?На помощь нам приходит JS. Раньше я терпеть его не мог, а теперь не вижу дальнейшего пути без него на просторе «правильного» WEB .
Решение приведенное ниже я выдумал не сам, а взял с буржуйского блога. Так как я жадный, а блог буржуйский, я не стану приводить на него ссылку.
За все у нас будет отвечать функция fnCheckFields() . Поместите на вашем сайте JS-код:
function fnCheckFields(form_obj){ var error_msg = "Пожалуйста, заполните все обязательные поля."; var is_error = false; for (var i = 0; form_obj_elem = form_obj.elements[i]; i++) if (form_obj_elem.type "input" || form_obj_elem.type "text") if (form_obj_elem.getAttribute("required") && !form_obj_elem.value) is_error = true; if (is_error) alert(error_msg); return !is_error; }
Обычно рекомендуют размещать его между html-тегами HEAD в начале страницы, но я бы рекомендовал все же размещать его в самом низу страницы до закрывающегося тега BODY . Таким образом JS меньше влияет на скорость загрузки страницы.
Окно ввода, где должен вводиться обязательный параметр, на html-языке должно выглядеть так:
Этот скрипт работает очень просто: после нажатия кнопки Отправить , скрипт проверяет все инпуты на наличие параметра required и если находит его, то соответственно смотрит на введенное значение этого поля. Если в такой инпут ничего не введено, то выводится предупреждающее окно о необходимости ввода. Данные соответственно никуда не отправляются.
Замечательно еще и то, что если у Вас нормальный браузер, который уже научился понимать этот параметр как положено, такого предупреждающего окна не всплывет и будут работать стандартные инструменты обработки параметра required для вашего браузера.
Рассказать в соц. сетях
Очень удобно всегда знать какой конкретно версии та или иная сборка проекта. Для этого обычно вводят номер версии, состоящий из нескольких цифр. Я являюсь сторонником структуры состоящей из 4 цифр, вида:
Все вместе это и формирует полное именование версии (Major.Minor.Pathch.Build):
Некоторые используют в качестве build уникальное числовое значение, которое увеличивается каждый раз, например, при ночной сборке. Я считаю, что никакого смысла в этом нет – гораздо удобнее привязать данный номер к ревизии в репозитории. Я использую Subversion и CMake, поэтому продемонстрирую как можно автоматизировать проставлении версии билда с этими инструментами.
Первое – необходимо добавить заголовочный файл в проект (например, version.h):
| #include #include namespace Version { const std:: string & AsText() ; boost:: uint64_t AsNumber() ; } |
Здесь находится простой интерфейс, через который из программы можно получить номер полной версии в текстовом виде или в виде уникального целочисленного идентификатора.
Теперь приведу содержимое version.cpp:
#include
#include "../version.h"
namespace
{
const
boost::
uint8_t
MAJOR =
4
;
const
boost::
uint16_t
MINOR =
6
;
const
boost::
uint16_t
PATCH =
12
;
const
boost::
uint32_t
BUILD =
589
;
// Это значение будет изменено автоматически
}
const
std::
string
&
Version::
AsText
()
{
static
const
std::
string
text =
boost::
str
(boost::
format
("%1%.%2%.%3%.%4%"
)
%
static_cast
<
unsigned
>
(MAJOR)
%
MINOR %
PATCH %
BUILD)
;
return
text;
}
boost::
uint64_t
Version::
AsNumber
()
{
BOOST_STATIC_ASSERT(BUILD <
0xFFFFFF
)
;
using
namespace
boost;
const
size_t
size =
sizeof
(uint64_t
)
;
static
const
boost::
uint64_t
number =
(static_cast
<
uint64_t
>
(MAJOR)
(MINOR)
(PATCH)
Похожие записи: |
