Создаем аккуратную контактную форму на HTML5

() translation by (you can also view the original English article)

В этом уроке мы узнаем, как создать шикарную контактную форму с поддержкой HTML5 AJAX. Форма будет использовать некоторые из новых элементов и атрибутов ввода HTML5 и будет проверена с помощью встроенной в браузер проверки формы.

Мы будем использовать jQuery и Modernizr, чтобы помочь со старыми браузерами, и PHP на стороне сервера для проверки ввода.

Шаг 1: Начало работы

Для начала нам нужно настроить наш каталог и файлы. Для начала я настоятельно рекомендую HTML5 boilerplate. Это действительно хорошая отправная точка для любого проекта HTML5 и сэкономит вам много времени. Для этого урока я выбрал «BOILERPLATE CUSTOM».

Для получения дополнительной информации о HTML5 boilerplate ознакомьтесь с этим руководством на Nettuts+.

После загрузки и распаковки удалите все, кроме index.html и папок css и js. Я также добавил папку с именем img и файл PHP с именем process.php. Мы будем использовать папку img для хранения изображений для нашей формы и process.php для обработки всей серверной логики для контактной формы. Вот как выглядит моя структура каталогов:

Это все, что нам нужно для начала! Шаблон HTML5 включает в себя потрясающий набор CSS с разумными настройками по умолчанию и включает все библиотеки JS (jQuery & Modernizr), которые мы собираемся использовать сегодня. Все наши JS-файлы и CSS-файлы были подключены в index файле. Теперь пришло время перейти к разметке.

Шаг 2: Форма

Откройте index.html и удалите все внутри элемента #container. Мы поместим нашу контактную форму внутри этого div:

<div id="contact-form" class="clearfix">
    <h1>Get In Touch!</h1>
    <h2>Fill out our super swanky HTML5 contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry :)</h2>
    <ul id="errors" class="">
        <li id="info">There were some problems with your form submission:</li>
    </ul>
    <p id="success">Thanks for your message! We will get back to you ASAP!</p>
    <form method="post" action="process.php">
        <label for="name">Name: <span class="required">*</span></label>
        <input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" autofocus="autofocus" />
        
        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
        
        <label for="telephone">Telephone: </label>
        <input type="tel" id="telephone" name="telephone" value="" />
        
        <label for="enquiry">Enquiry: </label>
        <select id="enquiry" name="enquiry">
            <option value="general">General</option>
            <option value="sales">Sales</option>
            <option value="support">Support</option>
        </select>
        
        <label for="message">Message: <span class="required">*</span></label>
        <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
        
        <span id="loading"></span>
        <input type="submit" value="Holla!" id="submit-button" />
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
    </form>
</div>

Это весь HTML-код, который нам понадобится для нашей формы. Давайте посмотрим на каждый отдельный раздел:

ul#errors и p#success будут контейнерами наших сообщений об ошибках и успехах. Мы будем скрывать их по умолчанию с помощью CSS и отображать их с помощью JavaScript или PHP после отправки формы. Для ввода имени наше единственное требование - чтобы оно было заполнено.

В HTML5 мы делаем это путем добавления атрибута 'required'. Это заставит браузер проверить, что в этом поле есть что-то, прежде чем разрешить отправку формы. Поле электронной почты аналогично - обязательное, но также мы хотим убедиться, что введенный текст это адрес электронной почты. Для этого мы указываем тип поля ввода - электронная почта, который является новым в HTML5. Хотя телефон не является обязательным полем, мы используем для этого HTML5 тип поля ввода - tel.

Запрос (Enquiry) - это стандартный элемент select, а сообщение - обычный textarea - здесь нет ничего нового. Для textarea мы установим обязательный атрибут, чтобы убедиться, что пользователь вводит некоторый текст.

В HTML5 есть новый атрибут для текстовых областей, называемый maxlength. Да, вы уже догадались, это позволяет нам установить максимальное количество символов, которое мы можем написать в текстовой области. По какой-то причине те, кто создал спецификацию HTML5, не думали, что нам понадобится атрибут minlength (как мы делаем сейчас), и для этого нет атрибута. Таким образом, в качестве временного атрибута minlength мы собираемся использовать еще один новый атрибут HTML5, называемый пользовательским атрибутом data. По сути, это любое имя атрибута с префиксом «data-». В нашем случае мы выбрали data-minlength. Это позволяет нам создавать собственные атрибуты.

Еще одна вещь, на которую стоит обратить внимание, - это то, что мы устанавливаем атрибут placeholder для всех элементов ввода (кроме телефона) и текстовой области. Это новый атрибут HTML5 для элемента input. Когда форма отображается в первый раз, на входе появляется текст-заполнитель, обычно другого цвета. Затем, когда вы фокусируете ввод, текст заполнителя исчезает. Если вы ушли из поля, не заполнив его, текст заполнителя будет добавлен обратно. Это довольно крутой эффект, и он может предоставить пользователю немного больше информации о том, что ему нужно сделать. Ранее это должно было быть сделано с помощью JavaScript.

Последнее, что следует отметить, - это то, что поля ввода имени имеет атрибут HTML5, называемый autofocus. Когда страница загружается впервые, этот элемент ввода сразу получает фокус, и пользователю ничего не нужно делать. Это также хорошо для того, чтобы побудить пользователя что-то сделать.

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

Шаг 3: Стилизация формы

Вот наша форма, выглядит не очень...

В данный момент она выглядит не слишком хорошо, и она не делает нашу блестящую новизну HTML5 видимой, поэтому давайте добавим немного CSS. Откройте файл style.css. Файл уже содержит некоторые стили по умолчанию, которые помогут нам сделать нашу форму кросс-браузерной. Прокрутите вниз и найдите комментарий, говорящий:

1	/*
2	// ========================================== \\
3	\|\| \|\|
4	\|\| Your styles ! \|\|
5	\|\| \|\|
6	\\ ========================================== //
7	*/

Сразу после этого вставьте следующий CSS:

#contact-form {
    background-color:#F2F7F9;
    width:465px;
    padding:20px;
    margin: 50px auto;    
    border: 6px solid #8FB5C1;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    position:relative;
}

#contact-form h1 {
    font-size:42px;
}

#contact-form h2 {
    margin-bottom:15px;
    font-style:italic;
    font-weight:normal;
}

#contact-form input, 
#contact-form select, 
#contact-form textarea, 
#contact-form label {
    font-size:15px;
    margin-bottom:2px;
}

#contact-form input, 
#contact-form select, 
#contact-form textarea {
    width:450px;
    border: 1px solid #CEE1E8;
    margin-bottom:20px;
    padding:4px;
}

#contact-form input:focus, 
#contact-form select:focus, 
#contact-form textarea:focus {
    border: 1px solid #AFCDD8;
    background-color: #EBF2F4;
}

#contact-form textarea {
    height:150px;
    resize: none;
}

#contact-form label {
    display:block;
}

#contact-form .required {
    font-weight:bold;
    color:#F00;    
}

#contact-form #submit-button {
    width: 100px;
    background-color:#333;
    color:#FFF;
    border:none;
    display:block;
    float:right;
    margin-bottom:0px;
    margin-right:6px;
    background-color:#8FB5C1;
    -moz-border-radius:8px;
}

#contact-form #submit-button:hover {
    background-color: #A6CFDD;
}

#contact-form #submit-button:active {
    position:relative;
    top:1px;
}

#contact-form #loading {
    width:32px;
    height:32px;
    background-image:url(../img/loading.gif);
    display:block;
    position:absolute;
    right:130px;
    bottom:16px;
    display:none;
}

#errors {
    border:solid 1px #E58E8E;
    padding:10px;
    margin:25px 0px;
    display:block;
    width:437px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;
    display:none;
}

#errors li {
    padding:2px;
    list-style:none;    
}

#errors li:before {
    content: ' - ';    
}

#errors #info {
    font-weight:bold;
}

#errors #info:before {
    content: '';    
}

#success {
    border:solid 1px #83D186;
    padding:25px 10px;
    margin:25px 0px;
    display:block;
    width:437px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;
    font-weight:bold;
    display:none;
}

#errors.visible, #success.visible {
    display:block;    
}

#req-field-desc {
    font-style:italic;
}

/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

/* Normalize placeholder styles */

/* chrome, safari */
::-webkit-input-placeholder {
    color:#CCC;
    font-style:italic;
}

/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#CCC;
    font-style:italic;
}

/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  { 
    color:#CCC;
    font-style:italic;
}

Если вы сохраните и перезагрузите компьютер, ваша страница должна выглядеть так:

Теперь форма выглядит лучше! CSS довольно стандартный, но я остановлюсь на нескольких вещах, которые не так очевидны:

1	#errors li:before {
2	content: ' - ';
3	}

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

1	#contact-form #submit-button:active {
2	position:relative;
3	top:1px;
4	}

Это даст нам хороший эффект при нажатии, когда кнопка отправки активна.

input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

Все браузеры (кроме IE) по умолчанию помещают красную тень вокруг обязательных элементов. На мой взгляд, это выглядит немного чрезмерным, поэтому я его убираю. Я уже указывал, что для указания, что поле необходимо заполнить, надо поставить красную звездочку на элементе label.

/* chrome, safari */
::-webkit-input-placeholder {
    color:#CCC;
    font-style:italic;
}

/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#CCC;
    font-style:italic;
}

/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  { 
    color:#CCC;
    font-style:italic;
}

Это нормализует внешний вид текста-заполнителя на полях ввода и текстовых областях. Здесь мы делаем его светло-серым и выделяем его курсивом. Это даст нам одинаковое отображение во всех браузерах, кроме Opera, которая не поддерживает стилизацию placeholder. IE просто не поддерживает атрибут placeholder. Полная остановка. Мы будем использовать JavaScript, чтобы обойти это. Вы можете узнать больше о стилизации HTML5-форм с помощью CSS (2.1 + 3) здесь.

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

Мы закончили с разметкой, и она выглядит довольно мило. Мы собираемся создать запасной вариант PHP в случае, если браузер пользователя не поддерживает новые атрибуты ввода формы (IE) или если у пользователя отключен JavaScript. Мы собираемся написать немного JavaScript позже, чтобы реализовать функции, отсутствующие в браузере. Но если у пользователя нет замечательного нового браузера или включен JavaScript, нам все равно нужно проверить отправку формы. Мы сделаем это на стороне сервера с помощью PHP. Мы также собираемся использовать его, чтобы отправить нам по электронной почте результаты формы.

Шаг 4: Подготовка к проверке на стороне сервера

Давайте погружаться. Откройте файл process.php и вставьте следующее:

<?php
if( isset($_POST) ){
    
    //form validation vars
    $formok = true;
    $errors = array();
    
    //sumbission data
    $ipaddress = $_SERVER['REMOTE_ADDR'];
    $date = date('d/m/Y');
    $time = date('H:i:s');
    
    //form data
    $name = $_POST['name'];    
    $email = $_POST['email'];
    $telephone = $_POST['telephone'];
    $enquiry = $_POST['enquiry'];
    $message = $_POST['message'];
    
    //form validation to go here....
    
}

Мы говорим здесь: выполнять следующий код только тогда, когда метод запроса - это POST. По умолчанию, если форма отправляется в сценарий PHP, входные значения формы хранятся в суперглобальном массиве с именем $_POST. Если ничего не пришло, $_POST не будет массивом, оператор if будет равен false и наш код не будет запущен.

Как только мы установим, что это запрос POST, мы можем начать логику обработки формы. Первое, что нам нужно сделать, это установить две переменные:

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

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

$ipaddress: IP-адрес пользователя, он может быть полезен для внесения в черный список спама, перекрестных ссылок на аналитические данные и т. д.
$date: дата отправки формы. Мы используем функцию date для генерации даты в британском формате.
$time: время отправки формы. Мы используем функцию date, чтобы сгенерировать время.

Мы могли бы объединить дату и время, если бы хотели:

1	$datetime = date('d/m/Y H:i:s');

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

Шаг 5: Проверка данных $_POST

Мы собираемся проверить каждую переменную в отдельности, чтобы убедиться, что их значение является корректным. Если это не так, мы установим для переменной $formok значение false и сохраним сообщение об ошибке в массиве $errors. Мы начнем с поля имени.

//validate name is not empty
if(empty($name)){
    $formok = false;
    $errors[] = "You have not entered a name";
}

Здесь мы просто проверяем, что $name на самом деле имеет значение. Если это не так, это означает, что пользователь не ввел имя. Мы используем функцию empty(), чтобы проверить это. Скобки [] после $errors является аналого для array_push (который используется для добавления элемента в конец массива). Далее мы проверим адрес электронной почты:

//validate email address is not empty
if(empty($email)){
    $formok = false;
    $errors[] = "You have not entered an email address";
//validate email address is valid
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
    $formok = false;
    $errors[] = "You have not entered a valid email address";
}

Мы собираемся проверить, был ли введен действительный адрес электронной почты. Для этой задачи мы будем использовать функцию filter_var(). Наконец, нам нужно проверить сообщение.

//validate message is not empty
if(empty($message)){
    $formok = false;
    $errors[] = "You have not entered a message";
}
//validate message is greater than 20 charcters
elseif(strlen($message) < 20){
    $formok = false;
    $errors[] = "Your message must be greater than 20 characters";
}

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

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

Шаг 6: Что делать дальше...

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

Это логика, которую мы будем использовать для отправки сообщения (вставьте это после того, как мы выполнили нашу проверку):

//send email if all is ok
if($formok){
    $headers = "From: info@example.com" . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    
    $emailbody = "<p>You have recieved a new message from the enquiries form on your website.</p>
                  <p><strong>Name: </strong> {$name} </p>
                  <p><strong>Email Address: </strong> {$email} </p>
                  <p><strong>Telephone: </strong> {$telephone} </p>
                  <p><strong>Enquiry: </strong> {$enquiry} </p>
                  <p><strong>Message: </strong> {$message} </p>
                  <p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";
    
    mail("enquiries@example.com","New Enquiry",$emailbody,$headers);
    
}

Чтобы отправить сообщение, мы будем использовать функцию mail(). Нам нужно будет передать этой функции четыре параметра: to, subject, message и headers.

to: Это будет адрес электронной почты, на который вы хотите отправить детали формы.
subject: это будет тема письма.
message: это будет содержание письма. Мы храним это в переменной $emailbody. Это HTML-строка, содержащая результаты нашей формы. Там, где вы видите фигурные скобки с именами наших переменных, они будут заменены на значения переменных при запуске этого скрипта. Это называется заменой переменных. Подстановка такого рода работает только в том случае, если строка заключена в кавычки DOUBLE, а не SINGLE.
headers: Это используется для передачи дополнительной информации почтовому клиенту, чтобы он знал, как отсылать электронную почту. Мы храним наши заголовки в переменной $headers и предоставляем дополнительную информацию о том, от кого получено электронное письмо и какой тип содержимого оно содержит.

Примечание. Не забудьте изменить адрес электронной почты from в заголовках и адрес электронной почты to в функции mail.

Это должно привести к подобному письму:

Если вы работаете на сервере Windows, вам может потребоваться вставить эту строку кода (перед объявлением переменной $headers), чтобы заставить работать функцию mail:

1	ini_set("sendmail_from","info@example.com");

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

//what we need to return back to our form
$returndata = array(
    'posted_form_data' => array(
        'name' => $name,
        'email' => $email,
        'telephone' => $telephone,
        'enquiry' => $enquiry,
        'message' => $message
    ),
    'form_ok' => $formok,
    'errors' => $errors
);

Мы будем хранить наши данные в ассоциативном массиве. Этот массив имеет три элемента:

posts_form_data: это будет массив, содержащий данные формы, которые были отправлены в сценарий.
form_ok: здесь мы будем хранить переменную $formok, и эта переменная будет проверена на странице формы, чтобы показать пользователю соответствующее сообщение.
errors: мы будем хранить переменную $errors. Эта переменная будет использоваться, если переменная $formok равна false.

Последнее, что нам нужно сделать, - это перенаправить пользователя обратно на страницу формы вместе с нашим массивом $returndata. Как только мы будем перенаправлены обратно на страницу формы, мы потеряем нашу переменную $returndata; поэтому, чтобы сделать эти данные постоянными, мы временно сохраним их в сессии.

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

//if this is not an ajax request
if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
    
    //set session variables
    session_start();
    $_SESSION['cf_returndata'] = $returndata;
    
    //redirect back to form
    header('location: ' . $_SERVER['HTTP_REFERER']);

}

Чтобы проверить, был ли это AJAX-запрос, мы ищем переменную $_SERVER['HTTP_X_REQUESTED_WITH']. Как и суперглобальный массив $_POST, есть еще один, называемый $_SERVER. Этот массив содержит информацию о сервере и среде выполнения. Обратитесь сюда для получения более подробной информации.

Затем мы вызываем session_start(), чтобы дать нам доступ к сессии, и устанавливаем переменную $_SESSION['cf_returndata'] для зеркального отображения $returndata. На странице формы мы теперь сможем получить доступ к этой переменной.

Чтобы перенаправить обратно на форму, мы используем функцию header(). Мы говорим ему перенаправить нас на последнюю страницу, с которой мы пришли, используя переменную: $_SERVER['HTTP_REFERER'].

В целом вы должны иметь в итоге это:

<?php
if( isset($_POST) ){
    
    //form validation vars
    $formok = true;
    $errors = array();
    
    //submission data
    $ipaddress = $_SERVER['REMOTE_ADDR'];
    $date = date('d/m/Y');
    $time = date('H:i:s');
    
    //form data
    $name = $_POST['name'];    
    $email = $_POST['email'];
    $telephone = $_POST['telephone'];
    $enquiry = $_POST['enquiry'];
    $message = $_POST['message'];
    
    //validate form data
    
    //validate name is not empty
    if(empty($name)){
        $formok = false;
        $errors[] = "You have not entered a name";
    }
    
    //validate email address is not empty
    if(empty($email)){
        $formok = false;
        $errors[] = "You have not entered an email address";
    //validate email address is valid
    }elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $formok = false;
        $errors[] = "You have not entered a valid email address";
    }
    
    //validate message is not empty
    if(empty($message)){
        $formok = false;
        $errors[] = "You have not entered a message";
    }
    //validate message is greater than 20 characters
    elseif(strlen($message) < 20){
        $formok = false;
        $errors[] = "Your message must be greater than 20 characters";
    }
    
    //send email if all is ok
    if($formok){
        $headers = "From: info@example.com" . "\r\n";
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
        
        $emailbody = "<p>You have received a new message from the enquiries form on your website.</p>
                      <p><strong>Name: </strong> {$name} </p>
                      <p><strong>Email Address: </strong> {$email} </p>
                      <p><strong>Telephone: </strong> {$telephone} </p>
                      <p><strong>Enquiry: </strong> {$enquiry} </p>
                      <p><strong>Message: </strong> {$message} </p>
                      <p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";
        
        mail("enquiries@example.com","New Enquiry",$emailbody,$headers);
        
    }
    
    //what we need to return back to our form
    $returndata = array(
        'posted_form_data' => array(
            'name' => $name,
            'email' => $email,
            'telephone' => $telephone,
            'enquiry' => $enquiry,
            'message' => $message
        ),
        'form_ok' => $formok,
        'errors' => $errors
    );
        
    
    //if this is not an ajax request
    if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
        //set session variables
        session_start();
        $_SESSION['cf_returndata'] = $returndata;
        
        //redirect back to form
        header('location: ' . $_SERVER['HTTP_REFERER']);
    }
}

Все, что нужно для обработки отправки нашей формы, сделано и уместилось менее чем в 90 строках PHP! Все, что нам нужно сделать сейчас, это обновить пользователя и предоставить либо сообщение об успехе, либо сообщение об ошибке. Вы можете сохранить process.php сейчас.

Шаг 7: Обновим интерфейс

Теперь, когда мы обработали данные формы и вернулись на страницу, нам нужно сообщить пользователю о том, что произошло. Это означает доступ к переменной сессии, которую мы установили в process.php, и выяснение того, какой ответ дать. Поскольку эта страница теперь должна использовать PHP, нам нужно изменить расширение файла index.html на .php (index.html = index.php). Не волнуйтесь, это не должно нарушать того, что мы уже сделали.

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

1	<?php session_start() ?>

Запуск сессии до того, как какой-либо контент будет отправлен в браузер, должен предотвратить возникновение ошибок типа «cannot send session cookie - headers already sent by...». Ниже элемента H2 формы добавляем в этот фрагмент PHP:

<?php
//init variables
$cf = array();
$sr = false;

if(isset($_SESSION['cf_returndata'])){
    $cf = $_SESSION['cf_returndata'];
    $sr = true;
}
?>

Мы устанавливаем две переменные в значения по умолчанию. Подробнее об этом позже ... Затем мы проверяем, установлена ли $_SESSION['cf_returndata']. Затем мы устанавливаем $cf (сокращение от контактной формы) равным нашей переменной сессии. Это просто для того, чтобы нам не печатать $_SESSION... каждый раз, когда мы хотим получить доступ к этим данным. Последняя переменная $sr (если не считать ответа сервера) имеет значение true. Это переменная, которую мы будем проверять, чтобы увидеть, отсылали ли мы ранее нашу форму. Следующее, что мы хотим сделать, это отобразить сообщение об ошибке или успехе в верхней части формы. Заменим это:

1	<ul id="errors" class="">
2	<li id="info">There were some problems with your form submission:</li>
3	</ul>
4	<p id="success">Thanks for your message! We will get back to you ASAP!</p>

На это:

<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
    <li id="info">There were some problems with your form submission:</li>
    <?php 
    if(isset($cf['errors']) && count($cf['errors']) > 0) :
        foreach($cf['errors'] as $error) :
    ?>
    <li><?php echo $error ?></li>
    <?php
        endforeach;
    endif;
    ?>
</ul>
<p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">Thanks for your message! We will get back to you ASAP!</p>

По умолчанию сообщения не отображаются вообще, потому что в CSS мы установили 'display: none'. Внутри атрибута класса сообщений мы используем PHP, чтобы добавить к ним класс 'visible', если они должны быть показаны. Этот класс устанавливает 'display' в 'block'.

1	<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>

Мы используем тернарный оператор здесь, чтобы проверить, что ...

a) ответ сервера равен true и
b) что форма была невалидная

По сути, если мы отправили форму, $sr будет равно true, а если форма была невалидной, $cf['form_ok'] будет равно false. Таким образом, класс visible будет выведен, но PHP и сообщение будут показаны, и наоборот для сообщения об успехе. Внутри скобок мы проверяем значения двух переменных. Мы проверяем, что $sr равно true, а (&&) $cf['fomr_ok'] равно false. Мы используем такое выражение для проверки этих значений. Вы также можете написать это так, если хотите:

1	<?php echo ($sr === true && $cf['form_ok'] === false) ? 'visible' : ''; ?>

После того, как мы решили, какое сообщение показывать, нам нужно заполнить контейнер соответствующими данными. Сообщение об успехе не меняется, поэтому мы можем оставить все как есть. Сообщение об ошибке нужно будет заполнить ошибками проверки. Чтобы записать их, мы просто перебираем наш массив ошибок, хранящийся в сессии, и заполняем элемент li внутри ul:

<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
    <li id="info">There were some problems with your form submission:</li>
    <?php 
    if(isset($cf['errors']) && count($cf['errors']) > 0) :
        foreach($cf['errors'] as $error) :
    ?>
    <li><?php echo $error ?></li>
    <?php
        endforeach;
    endif;
    ?>
</ul>

Сначала мы проверяем, что у нас есть массив ошибок в $cf и что он содержит хотя бы одну ошибку. Операторы if и foreach могут немного отличаться от того, что вы видели раньше. Это называется Альтернативным Синтаксисом. Мы использовали альтернативный синтаксис здесь просто для того, чтобы сделать его немного более читаемым при смешивании с HTML. Вы можете использовать обычный синтаксис, хотя, все зависит от предпочтений.

Это все, что нам нужно, чтобы показать пользователю ответ на отправку формы. Чтобы проверить это, отключите JavaScript и отправьте форму. Помните, что браузер будет проверять форму, так как мы используем новые элементы HTML5. Чтобы быть уверенным, что мой PHP работает, я тестирую в IE8. Да, верно, IE иногда пригодится ...

Если вы отправите невалидную форму, вы должны получить это:

И если вы правильно заполните форму, вы должны получить:

Вы также должны были получить электронное письмо, согласно коду, который мы написали ранее (если вы правильно заполнили форму). Теперь, когда форма работает, последнее, что нам нужно сделать, это снова заполнить поля формы данными пользователя, если отправка была неверной. Поменяйте HTML внутри тегов формы для этого:

<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required="required" autofocus="autofocus" />

<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required="required" />

<label for="telephone">Telephone: </label>
<input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />

<label for="enquiry">Enquiry: </label>
<select id="enquiry" name="enquiry">
    <option value="General" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'General') ? "selected='selected'" : '' ?>>General</option>
    <option value="Sales" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Sales') ? "selected='selected'" : '' ?>>Sales</option>
    <option value="Support" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Support') ? "selected='selected'" : '' ?>>Support</option>
</select>

<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>

<span id="loading"></span>
<input type="submit" value="Holla!" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>

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

1	<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>

Как и в случае с сообщениями об успехе и ошибках, мы проверяем, равно ли значение $sr true, а значение $cf['form_ok'] равно false, и если так и есть, мы записываем сохраненное значение в сессию для этого поля формы. Это делается с помощью тернарного оператора.

В случае элемента select мы делаем то же самое, за исключением того, что вместо записи сохраненного значения нам нужно проверить значение каждого элемента option, чтобы увидеть, соответствует ли оно значению, сохраненному в сессии. Если оно совпадает, мы выводим атрибут selected для этой опции.

Наконец, последнее, что мы собираемся сделать, это unset эту переменную сессии после того, как мы получили от нее наши данные. Вы не обязаны делать это, все сводится к предпочтениям. Если удалить ее сейчас, когда страница обновляется с помощью кнопки обновления (не отправка формы), сообщение об ошибке/успехе не будет отображаться. Если вы не удалили ее, пользователь может заполнить контактную форму, поискать информацию в Интернете, вернуться к форме, и сообщение об ошибке/успехе все равно будет отображаться. Мне это не нравится, поэтому я собираюсь предотвратить это, поместив эту строку PHP сразу после закрывающих тегов формы:

1	<?php unset($_SESSION['cf_returndata']); ?>

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

<div id="contact-form" class="clearfix">
    <h1>Get In Touch!</h1>
    <h2>Fill out our super swanky HTML5 contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry :)</h2>
    <?php
    //init variables
    $cf = array();
    $sr = false;
    
    if(isset($_SESSION['cf_returndata'])){
        $cf = $_SESSION['cf_returndata'];
        $sr = true;
    }
    <ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
        <li id="info">There were some problems with your form submission:</li>
        <?php 
        if(isset($cf['errors']) && count($cf['errors']) > 0) :
            foreach($cf['errors'] as $error) :
        ?>
        <li><?php echo $error ?></li>
        <?php
            endforeach;
        endif;
        ?>
    </ul>
    <form method="post" action="process.php">
        <label for="name">Name: <span class="required">*</span></label>
        <input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required autofocus />
        
        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required />
        
        <label for="telephone">Telephone: </label>
        <input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />
        
        <label for="enquiry">Enquiry: </label>
        <select id="enquiry" name="enquiry">
            <option value="General" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'General') ? "selected='selected'" : '' ?>>General</option>
            <option value="Sales" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Sales') ? "selected='selected'" : '' ?>>Sales</option>
            <option value="Support" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Support') ? "selected='selected'" : '' ?>>Support</option>
        </select>
        
        <label for="message">Message: <span class="required">*</span></label>
        <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>
        
        <span id="loading"></span>
        <input type="submit" value="Holla!" id="submit-button" />
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
    </form>
    <?php unset($_SESSION['cf_returndata']); ?>
</div>

Не забывайте session_start() в верхней части страницы! Теперь у нас есть полнофункциональная контактная форма.

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

Это все прекрасно и здорово, но мы можем сделать еще один шаг вперед. Мы можем использовать JavaScript, чтобы реализовать функции, которых нет в браузере (встроенная проверка, поддержка атрибутов HTML5 и т. д.). Мы даже можем использовать JavaScript для отображения наших сообщений об ошибке/успехе и отправить форму с использованием AJAX.

Но зачем это делать, когда форма уже работает? Ну, это просто. Мы хотим обеспечить как можно большую согласованность во всех браузерах, даже если это действительно ненадежный браузер. Кроме того, если мы заставим браузер клиента делать всю работу по проверке, он сэкономит ресурсы нашего сервера, поскольку мы не отправляем данные, когда форма невалидная. Эти вещи - очень полезны и круты, и на самом деле это не так сложно сделать.

Шаг 8: Что такое полифилл?

«Полифилл или полифиллер - это фрагмент кода, который предоставляет технологию, которую вы, разработчик, ожидаете от браузера».

В нашем случае мы ожидаем, что браузер будет поддерживать новые типы полей ввода и атрибуты HTML5, которые мы использовали. Firefox, Chrome, Opera и Safari имеют довольно хорошую встроенную поддержку для них. IE6 - 9 вообще не поддерживает их. Типично. Честно говоря, это довольно шокирующее, что IE9 не имеет поддержки этих вещей, он был выпущен в начале этого года. В любом случае, откладывая IE в сторону (я мог бы продолжать бесконечно), первые две вещи, которые мы собираемся дополнить, - это autofocus и атрибут placeholder.

Мы будем использовать jQuery, чтобы помочь нам с нашим JavaScript. Мы будем использовать его в первую очередь для обработки нашего AJAX-запроса, анимации и обхода и манипуляции с DOM. Вы можете обойтись без его использования, но вам придется написать значительное количество кода. Его размер не слишком велик, поэтому я могу смириться с загрузкой файла такого размера. Я, вероятно, как и вы, предпочел бы написать меньше кода.

Мы также будем использовать библиотеку JavaScript Modernizr, чтобы помочь нам с обнаружением функций. Это уже включено как часть нашего шаблона HTML5, поэтому нам не нужно ничего делать, чтобы запустить Modernizr!

Перейдите в каталог js и откройте скрипт script.js. Нам не нужно беспокоиться о подключении этого файла, jQuery или Modernizr, к index.php, так как он уже был предоставлен нам для HTML5 boilerplate, который мы использовали. Удалите все в этом файле и вставьте следующее:

$(function(){

    //set global variables and cache DOM elements for reuse later
    var form = $('#contact-form').find('form'),
        formElements = form.find('input[type!="submit"],textarea'),
        formSubmitButton = form.find('[type="submit"]'),
        errorNotice = $('#errors'),
        successNotice = $('#success'),
        loading = $('#loading'),
        errorMessages = {
            required: ' is a required field',
            email: 'You have not entered a valid email address for the field: ',
            minlength: ' must be greater than '
        }

    //feature detection + polyfills
    formElements.each(function(){
    
        //do feature detection + polyfills here
        
    });
});

Весь наш код будет внутри блока $(function(){ }). Это будет означать, что наш код будет выполнен, как только страница загрузится. Также любые переменные или функции, которые мы объявляем внутри этого блока, не будут мешать любому другому коду снаружи. Затем мы кешируем некоторые элементы DOM, так как к ним мы будем обращаться довольно часто. Кэшировать их более эффективно, чем запрашивать их каждый раз, когда вы хотите их использовать. Вот объяснение того, что является каждой переменной:

form: Элемент контактной формы.
formElements: Все элементы ввода и текстовые области в форме, кроме кнопки отправки. Это будет просто массив элементов.
formSubmitButton: Кнопка отправки формы.
errorNotice: Уведомление об ошибке - неупорядоченный элемент списка.
successNotice: Сообщение об успехе - элемент абзаца.
loading: Элемент прогресса загрузки. Он отобразит 'загрузочный' GIF, когда форма будет отправлена после проверки.
errorMessages: Это объект, содержащий некоторый текст для наших сообщений об ошибках. Они используются более одного раза, поэтому мы создаем их здесь. Вы заметите, что некоторые сообщения не читаются правильно. Мы будем динамически добавлять их позже, когда перейдем к проверке формы.

После этого мы используем функцию jQuery, которая называется each(), для перебора массива formElements. Пока мы выполняем итерации по элементам формы, мы хотим выполнить обнаружение объектов для атрибута placeholder, и если у элемента есть этот атрибут, но он не поддерживается браузером, применим наш polyfill. Вот polyfill для атрибута placeholder:

//if HTML5 input placeholder attribute is not supported
if(!Modernizr.input.placeholder){
    var placeholderText = this.getAttribute('placeholder');
    if(placeholderText){
        $(this)
            .addClass('placeholder-text')
            .val(placeholderText)
            .bind('focus',function(){
                if(this.value == placeholderText){
                    $(this)
                        .val('')
                        .removeClass('placeholder-text');
                }
            })
            .bind('blur',function(){
                if(this.value == ''){
                    $(this)
                        .val(placeholderText)
                        .addClass('placeholder-text');
                }
            });
    }
}

Здесь мы используем Modernizr, чтобы определить, есть ли у нас поддержка атрибута placeholder. Modernizer - это объект, input - это свойство этого объекта, а placeholder - это свойство поля ввода (отсюда и все точки). Это значение будет либо true, либо false. Мы проверяем, является ли оно false (браузер не поддерживает атрибут placeholder); если это так, мы реализуем наш полифилл. Первое, что мы делаем, это объявляем переменную, которая будет содержать текст placeholder-а, назначенный элементу. Даже если браузер не поддерживает атрибут placeholder, мы все равно можем получить доступ к этому атрибуту. Для этого мы используем функцию с именем getAttribute(). Ключевое слово 'this' относится к текущему элементу DOM, который мы повторяем в цикле.

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

Мы заключаем ключевое слово 'this' в функцию jQuery ($()), поэтому имеем доступ к некоторым удобным функциям DOM jQuery.
Мы добавляем класс 'placeholder-text' к элементу. Это сделает текст placeholder-ов элементов, которые мы собираемся починить, похожим на остальные браузеры. Мы уже установили правило для этого в CSS.
Мы устанавливаем значение по умолчанию в значение атрибута placeholder для поля ввода. Это покажет текст placeholder в поле ввода, когда страница загружена.
Мы привязываем событие фокуса, которое проверит, совпадает ли текст атрибута placeholder со значением входных данных. Если это так, тогда для значения ввода ничего не задано, что очищает ввод, и мы удаляем класс 'placeholder-text', чтобы текст являлся текстом ввода по умолчанию.
Мы привязываем событие blur, которое проверит, равно ли значение ввода пустоте. Если это так, мы заполняем ввод текстом-placeholder и повторно применяем 'placeholder-text'.

Это заставит любой браузер, который не поддерживает атрибут placeholder, действовать так, как если бы он поддерживал этот атрибут. Смотрите изображение ниже из IE8:

Далее мы добавим атрибут autofocus. Это очень просто:

1	//if HTML5 input autofocus attribute is not supported
2	if(!Modernizr.input.autofocus){
3	if(this.getAttribute('autofocus')) this.focus();
4	}

Мы используем Modernizer, чтобы определить, поддерживается ли атрибут autofocus. Если нет, то мы проверяем, имеет ли этот элемент установленный атрибут autofocus, и если это так, мы фокусируем его. Просто. В любом браузере, который не поддерживает этот атрибут, это будет исправлено.

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

Шаг 9: Проверка формы, стили Polyfill

//to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
//An invalid html5 form element will not trigger a form submit.
formSubmitButton.bind('click',function(){
    var formok = true,
        errors = [];
        
    formElements.each(function(){
           
        //validate form elements here
           
    });
    
    //if form is not valid
    if(!formok){
        
        //show error message here
        
    }
    //if form is valid
    else {
        
        //ajax request + show success message here
        
    }
    
    return false; //this stops submission off the form and also stops browsers showing default error message
});

Мы связываем событие click с кнопкой отправки формы (хранится в переменной formSubmitButton). Когда это событие сработает, мы проверим форму. Обычно в JavaScript мы делаем это для события submit формы, но поскольку новые браузеры используют свои собственные встроенные средства проверки, событие submit формы никогда не запускается. Браузер будет отображать свои собственные сообщения об ошибках, но они крайне противоречивы во всех браузерах, и в настоящее время нет способа их стилизовать. Отображение нашего собственного сообщения об ошибке обеспечит согласованность, а также покажет для браузеров, которые не поддерживают новые методы проверки. Чтобы браузеры не отображали свои сообщения об ошибках по умолчанию, мы возвращаем false в конце этой функции. Вот объяснение того, для чего нужны переменные, установленные вверху:

formok: Это будет отслеживать правильность формы.
errors: Это массив, который будет содержать сообщения об ошибках.

Это похоже на валидацию PHP, которую мы написали ранее!

Мы начнем внутри цикла, где будем проверять элементы формы. Внутри этого цикла мы хотим начать с объявления некоторых полезных переменных, которые мы будем использовать при проверке.

var name = this.name,
    nameUC = name.ucfirst(),
    value = this.value,
    placeholderText = this.getAttribute('placeholder'),
    type = this.getAttribute('type'), //get type old school way
    isRequired = this.getAttribute('required'),
    minLength = this.getAttribute('data-minlength');

name: Имя текущего элемента.
nameUC: Имя текущего элемента с заглавной буквой. ucfirst() - это пользовательский метод строкового объекта, который мы напишем позже.
value: Значение текущего элемента.
placeholderText: Текст placeholder-а текущего элемента.
type: Тип текущего элемента.
isRequired: Установлен ли у текущего элемента обязательный атрибут или нет.
minLength: Значение data-minlength текущего элемента (если применимо).

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

В HTML5 элементы формы имеют новое свойство, называемое validity. Здесь хранятся все данные проверки для этого элемента. В Firebug это выглядит так:

Как вы можете видеть, у этого объекта есть множество свойств, которые дают нам немного больше информации о том, в чем проблема. Значения свойств являются либо false либо false. На этом скриншоте я попытался отправить форму без имени и зарегистрировал свойство validity для ввода имени в консоли (console.log(this.validity) ). Это показывает, что значение отсутствовало (valueMissing = true).

Наш код для проверки элементов HTML5:

//if HTML5 formfields are supported            
if( (this.validity) && !this.validity.valid ){
    formok = false;
    
    //if there is a value missing
    if(this.validity.valueMissing){
        errors.push(nameUC + errorMessages.required);    
    }
    //if this is an email input and it is not valid
    else if(this.validity.typeMismatch && type == 'email'){
        errors.push(errorMessages.email + nameUC);
    }
    
    this.focus(); //safari does not focus element an invalid element
    return false;
}

Мы проверяем, имеет ли этот элемент формы свойство validity, и, если оно есть, мы проверяем свойство valid объекта validity, чтобы убедиться, что это поле в порядке. Если он невалиден (я использую сокращение,!, для проверки на false), мы устанавливаем formok в false и выполняем некоторые тесты, чтобы увидеть, в чем проблема.

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

Если значение этого поля формы не пропущено, мы хотим определить, были ли введены правильные данные. Единственное поле ввода в нашей форме, который нуждается в проверке, это поле электронной почты. Имея это в виду, в elseif части нашего кода мы проверяем, равно ли свойство typeMismatch объекта validity true и является ли тип этого поля ввода действительно электронной почтой. Если это так, мы добавляем сообщение об ошибке электронной почты в наш массив ошибок.

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

Это будет проверять наши входные данные HTML5, но теперь нам нужно ориентироваться на браузеры, которые не поддерживают API проверки форм JavaScript. Если API проверки формы JavaScript не поддерживается браузером, приведенный выше код никогда не будет выполнен и будет пропущен.

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

//if this is a required element
if(isRequired){    
    //if HTML5 input required attribute is not supported
    if(!Modernizr.input.required){
        if(value == placeholderText){
            this.focus();
            formok = false;
            errors.push(nameUC + errorMessages.required);
            return false;
        }
    }
}

Во-первых, мы проверяем, является ли это поле обязательным (определяется атрибутом required). Затем мы используем Modernizr, чтобы проверить, поддерживается ли атрибут required браузером. Если нет, нам нужно вручную проверить значение элемента и сравнить его с атрибутом placeholder. Если они одинаковые, то, очевидно, это поле формы не заполнено, поэтому мы делаем четыре вещи:

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

Затем мы собираемся проверить, является ли это поле ввода полем электронной почты, и, если это так, был ли введен действительный адрес электронной почты.

//if HTML5 input email input is not supported
if(type == 'email'){     
    if(!Modernizr.inputtypes.email){ 
        var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
        if( !emailRegEx.test(value) ){    
            this.focus();
            formok = false;
            errors.push(errorMessages.email + nameUC);
            return false;
        }
    }
}

Это делается почти так же, как и раньше. Мы видим, действительно ли это поле электронной почты, а затем используем Modernizr, чтобы проверить, поддерживается ли поле электронной почты. Если это не так, мы пишем наш код, который проверяет, является ли она действительной или нет. Для этого полифилла мы используем регулярные выражения, чтобы проверить, является ли электронная почта действительной или нет. Мы создаем регулярное выражение в переменной emailRegEx, а затем используем метод test() объекта регулярного выражения, чтобы проверить, соответствует ли значение поля ввода регулярному выражению.

Вы можете узнать больше об использовании регулярных выражений JavaScript здесь.

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

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

//check minimum lengths
if(minLength){
    if( value.length < parseInt(minLength) ){
        this.focus();
        formok = false;
        errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
        return false;
    }
}

Нам не нужно использовать Modernizr здесь. Вместо этого все, что нам нужно сделать, это проверить, что у этого элемента установлена минимальная длина, и, если это так, убедиться, что его длина больше, чем его установленная минимальная длина. Length является свойством всех строковых объектов в JavaScript и возвращает количество символов в строке. Мы используем parseInt() для преобразования minLength в целое число, чтобы сравнить его со значением value.length. minLength было получено из атрибута data-minlength. Это значение извлекается в виде строки, поэтому, чтобы предотвратить возможные ошибки в будущем (сравнение строк с числами и т. д.), мы конвертируем его в целое число.

Наши полифилы и проверки завершены и отсортированы. Вы должны были получить следующий код:

//to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
//An invalid html5 form element will not trigger a form submit.
formSubmitButton.bind('click',function(){
    var formok = true,
        errors = [];
        
    formElements.each(function(){
        var name = this.name,
            nameUC = name.ucfirst(),
            value = this.value,
            placeholderText = this.getAttribute('placeholder'),
            type = this.getAttribute('type'), //get type old school way
            isRequired = this.getAttribute('required'),
            minLength = this.getAttribute('data-minlength');
            
        //if HTML5 formfields are supported            
        if( (this.validity) && !this.validity.valid ){
            formok = false;
            
            //if there is a value missing
            if(this.validity.valueMissing){
                errors.push(nameUC + errorMessages.required);    
            }
            //if this is an email input and it is not valid
            else if(this.validity.typeMismatch && type == 'email'){
                errors.push(errorMessages.email + nameUC);
            }
            
            this.focus(); //safari does not focus element an invalid element
            return false;
        }
        
        //if this is a required element
        if(isRequired){    
            //if HTML5 input required attribute is not supported
            if(!Modernizr.input.required){
                if(value == placeholderText){
                    this.focus();
                    formok = false;
                    errors.push(nameUC + errorMessages.required);
                    return false;
                }
            }
        }

        //if HTML5 input email input is not supported
        if(type == 'email'){     
            if(!Modernizr.inputtypes.email){ 
                var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
                if( !emailRegEx.test(value) ){    
                    this.focus();
                    formok = false;
                    errors.push(errorMessages.email + nameUC);
                    return false;
                }
            }
        }
        
        //check minimum lengths
        if(minLength){
            if( value.length < parseInt(minLength) ){
                this.focus();
                formok = false;
                errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
                return false;
            }
        }
    });
    
    //if form is not valid
    if(!formok){
        
        //show error message here
        
    }
    //if form is valid
    else {
        
        //ajax request + show success message here
        
    }
    
    return false; //this stops submission off the form and also stops browsers showing default error message
});

Потрясающие! Мы почти у цели. На данный момент все, что нам нужно сделать, это написать код, который обрабатывает логику, чтобы проверить, должна ли форма быть отправлена или нет. Нам нужно будет отобразить наши сообщения об ошибках, которые мы сохранили, и прекратить отправку формы в случае ошибки. Если, с другой стороны, ошибки нет, мы отправляем форму через AJAX и показываем сообщение об успехе. Нам также нужно реализовать функцию ucfirst(), которую мы использовали для прописных букв первой буквы каждого имени поля.

Шаг 11: Почти там ...

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

//other misc functions
function showNotice(type,data)
{
    if(type == 'error'){
        successNotice.hide();
        errorNotice.find("li[id!='info']").remove();
        for(x in data){
            errorNotice.append('<li>'+data[x]+'</li>');    
        }
        errorNotice.show();
    }
    else {
        errorNotice.hide();
        successNotice.show();    
    }
}

String.prototype.ucfirst = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

Функция showNotice будет принимать два аргумента.

Тип сообщения для отображения
Данные для отображения в сообщении.

Если типом является 'error', мы скрываем сообщение об успешном завершении, перебираем данные (которые должны быть массивом) и добавляем элементы списка к уведомлениям об ошибках UL. Затем мы показываем уведомление об ошибке с помощью функции jQuery show(). Поскольку весь наш код содержится в одном и том же блоке, мы имеем доступ к переменным, установленным вне этой функции (successNotice и errorNotice). Если мы хотим показать сообщение об успехе, мы просто скрываем сообщение об ошибке и отображаем сообщение об успехе.

О функции ucfirst() - я добавляю эту функцию в прототип строкового объекта.

«Прототип - это объект, от которого другие объекты наследуют свойства».

Это означает, что все строковые объекты будут наследовать нашу функцию ucfirst(). Вот почему ранее мы использовали name.ucfirst(). name является строкой, и поскольку наш метод находится в прототипе, он доступен для использования.

Мы получаем первый символ (charAt(0)), делаем его заглавным (toUpperCase()), а затем возвращаем его с остальной частью строки минус первый символ (slice(1)). charAt, toUpperCase и slice являются методами строкового объекта. Вы можете прочитать больше об объекте-прототипе здесь или здесь.

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

//if form is not valid
if(!formok){
    
    //show error message here
    
}
//if form is valid
else {
    
    //ajax request + show success message here
    
}

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

//animate required field notice
$('#req-field-desc')
    .stop()
    .animate({
        marginLeft: '+=' + 5
    },150,function(){
        $(this).animate({
            marginLeft: '-=' + 5
        },150);
    });

//show error message 
showNotice('error',errors);

Первый фрагмент кода просто анимирует «* указывает на обязательность поля». Это не обязательно; это просто фича, которая дает пользователю немного больше обратной связи - что проблема, по сути, возникла. Мы используем функцию jQuery animate() для анимации свойства CSS margin-left поля элемента. После этого мы будем вызывать нашу функцию showNotice(). Мы хотим показать сообщение об ошибке, поэтому мы передаем 'error' в качестве первого аргумента, а затем массив ошибок, в котором мы храним наши сообщения об ошибках проверки формы.

Если форма валидна, мы должны отправить ее через AJAX.

loading.show();
$.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    data: form.serialize(),
    success: function(){
        showNotice('success');
        form.get(0).reset();
        loading.hide();
    }
});

Во-первых, мы раскрываем наш 'загрузочный' gif, чтобы указать, что форма что-то делает. Затем мы используем функцию jQuery ajax() для отправки формы в process.php. Для url и type мы используем функцию jQuery attr(), чтобы получить эти атрибуты. Для данных мы используем функцию jQuery serialize(). Если запрос AJAX был успешным, мы вызываем нашу функцию showNotice() и передаем ей 'success' в качестве первого аргумента. Это отображает наше сообщение об успехе. Последнее, что мы делаем, это сбрасываем форму (очищаем поля формы) и скрываем gif загрузки. Все, о JavaScript теперь позаботились! Поздравляю! Вы должны были закончить с файлом script.js, должно быть похоже на это:

$(function(){

    //set global variables and cache DOM elements for reuse later
    var form = $('#contact-form').find('form'),
        formElements = form.find('input[type!="submit"],textarea'),
        formSubmitButton = form.find('[type="submit"]'),
        errorNotice = $('#errors'),
        successNotice = $('#success'),
        loading = $('#loading'),
        errorMessages = {
            required: ' is a required field',
            email: 'You have not entered a valid email address for the field: ',
            minlength: ' must be greater than '
        }
    
    //feature detection + polyfills
    formElements.each(function(){

        //if HTML5 input placeholder attribute is not supported
        if(!Modernizr.input.placeholder){
            var placeholderText = this.getAttribute('placeholder');
            if(placeholderText){
                $(this)
                    .addClass('placeholder-text')
                    .val(placeholderText)
                    .bind('focus',function(){
                        if(this.value == placeholderText){
                            $(this)
                                .val('')
                                .removeClass('placeholder-text');
                        }
                    })
                    .bind('blur',function(){
                        if(this.value == ''){
                            $(this)
                                .val(placeholderText)
                                .addClass('placeholder-text');
                        }
                    });
            }
        }
        
        //if HTML5 input autofocus attribute is not supported
        if(!Modernizr.input.autofocus){
            if(this.getAttribute('autofocus')) this.focus();
        }
        
    });
    
    //to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
    //An invalid html5 form element will not trigger a form submit.
    formSubmitButton.bind('click',function(){
        var formok = true,
            errors = [];
            
        formElements.each(function(){
            var name = this.name,
                nameUC = name.ucfirst(),
                value = this.value,
                placeholderText = this.getAttribute('placeholder'),
                type = this.getAttribute('type'), //get type old school way
                isRequired = this.getAttribute('required'),
                minLength = this.getAttribute('data-minlength');
                
            //if HTML5 formfields are supported            
            if( (this.validity) && !this.validity.valid ){
                formok = false;
                
                //if there is a value missing
                if(this.validity.valueMissing){
                    errors.push(nameUC + errorMessages.required);    
                }
                //if this is an email input and it is not valid
                else if(this.validity.typeMismatch && type == 'email'){
                    errors.push(errorMessages.email + nameUC);
                }
                
                this.focus(); //safari does not focus element an invalid element
                return false;
            }
            
            //if this is a required element
            if(isRequired){    
                //if HTML5 input required attribute is not supported
                if(!Modernizr.input.required){
                    if(value == placeholderText){
                        this.focus();
                        formok = false;
                        errors.push(nameUC + errorMessages.required);
                        return false;
                    }
                }
            }

            //if HTML5 input email input is not supported
            if(type == 'email'){     
                if(!Modernizr.inputtypes.email){ 
                    var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
                     if( !emailRegEx.test(value) ){    
                        this.focus();
                        formok = false;
                        errors.push(errorMessages.email + nameUC);
                        return false;
                    }
                }
            }
            
            //check minimum lengths
            if(minLength){
                if( value.length < parseInt(minLength) ){
                    this.focus();
                    formok = false;
                    errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
                    return false;
                }
            }
        });
        
        //if form is not valid
        if(!formok){
            
            //animate required field notice
            $('#req-field-desc')
                .stop()
                .animate({
                    marginLeft: '+=' + 5
                },150,function(){
                    $(this).animate({
                        marginLeft: '-=' + 5
                    },150);
                });
            
            //show error message 
            showNotice('error',errors);
            
        }
        //if form is valid
        else {
          loading.show();
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: form.serialize(),
                success: function(){
                    showNotice('success');
                    form.get(0).reset();
                    loading.hide();
                }
            });
        }
        
        return false; //this stops submission off the form and also stops browsers showing default error messages
        
    });

    //other misc functions
    function showNotice(type,data)
    {
        if(type == 'error'){
            successNotice.hide();
            errorNotice.find("li[id!='info']").remove();
            for(x in data){
                errorNotice.append('<li>'+data[x]+'</li>');    
            }
            errorNotice.show();
        }
        else {
            errorNotice.hide();
            successNotice.show();    
        }
    }
    
    String.prototype.ucfirst = function() {
        return this.charAt(0).toUpperCase() + this.slice(1);
    }
    
});

Заключение

Поздравляю! Вы сделали это. Это была долгая поездка, и мы рассмотрели много вопросов в этом уроке.

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

Спасибо за чтение, и я надеюсь, что вам понравился этот урок!