В этой главе я покажу вам, какую поддержку осуществляет jQuery для работы с HTML формами. В частности, я перечислю события, относящиеся к формам, и методы jQuery, которые вы можете использовать, чтобы управлять ими; однако большая часть этой главы посвящена плагину, который предоставляет отличный механизм для валидации значений, которые пользователь вводит в форму, прежде чем они отправятся на сервер. Если вы когда-либо писали веб приложение с формами, вы понимаете, что пользователь может вводить в форму любые виды данных, поэтому валидация является важным процессом.
Я начинаю эту главу с представления серверного скрипта Node.js , который вы будете использовать в этой части книги. В этой главе скрипт не сделает многого. Он только покажет вам значения данных, которые были введены в форму, но в дальнейших главах вы будете больше работать с Node.js . В представлено краткое содержание этой главы.
Таблица 13-1: Краткое содержание главы| Задача | Решение | Листинг |
| Установить сервер Node.js | Использовать скрипт, представленный в данной главе (и включенный в исходный код, сопровождающий эту книгу) | , |
| Отреагировать на фокус, полученный или потерянный элементом | Использовать методы focus и blur | |
| Отреагировать на изменения значений, которые пользователь ввел в элемент | Использовать метод change | |
| Отреагировать (и/или прервать) на отправку пользователем формы | Использовать метод submit | , |
| Валидировать значения в форме | Использовать плагин валидации | |
| Конфигурировать плагин валидации | Передать объект-карту методу validate | |
| Определить и применить правила валидации, используя класс | Использовать методы addClassRules и addClass | , , , |
| Применить правила валидации напрямую к элементам | Использовать метод rules | , |
| Применить правила валидации, используя имена элементов | Добавить свойство rules объекту options | |
| Применить правила валидации, используя атрибуты элементов | Определить атрибуты, которые соответствуют отдельным проверкам валидации | |
| Определить пользовательские сообщения для правил, применяемых через имена и атрибуты элементов | Добавить свойство message в объект options , установленный в объект-карту, который определяет пользовательские сообщения | , |
| Определить пользовательские сообщения для правил, применяемых напрямую к элементам | Включить объект-карту, определяющего сообщения, в качестве аргумента для метода rules | |
| Создать пользовательскую проверку валидации | Использовать метод addMethod | , |
| Отформатировать сообщения о валидации | Использовать свойства highlight , unhighlight , errorElement и errorClass объекта options |
Формы – это, пожалуй, один из самых нелюбимых элементов на странице – пока настроишь
внешний вид, потом еще проверь, что ввели нерадивые пользователи да выведи им
информацию о допущенных ошибках, и в конце концов отправляешь на сервер данные с
чувством облегчения от проделанной кропотливой работы. Так вот – о том, что поможет в
этой самой работе я и буду рассказывать.
Для начала, стоит напомнить события с которыми чаще всего придётся работать:
change - изменение значения элемента
submit - отправка формы
В каких же случаях они нам помогут? Да всё просто – отслеживание change позволяет
обрабатывать такие события как изменение selectbox"а, или radiobutton"а, что потребуется
для динамического изменения формы. И самый простой пример тому – это на странице
регистрации выбор страны, затем по выбранной стране должен быть подгружен список
регионов, по региону – список городов и так далее. Отслеживание submit потребуется для
проверки правильности заполнения формы, а так же для отправки формы посредством
AJAX. Форму возьмём попроще:
User
Admin
А примеры будут идти в обратном порядке, вот отправка формы AJAX"ом по ссылке из
action: $("form").submit(function(){
// чуть позже расскажу подробнее о AJAX
$.post($(this).attr("action"), // ссылка куда отправляем данные
$(this).serialize() // данные формы);64
// отключаем действие по умолчанию
return false;
});
Вот и первый метод – serialize() – он в ответе за «сбор» данных с формы в удобном для
передачи данных формате:
name=Ivan&role=Admin
Так же есть метод serializeArray() –он собранные данные представляет в виде объекта: [
{
name:"name",
value:"Ivan"
},
{
name:"role",
value:"Admin"
},
]
Теперь стоит добавить в данный код немного проверки данных: $("form").submit(function(){
if ($(this).find("input").val() == "") {
alert("Введите имя пользователя");
return false;
}
// кусок кода с отправкой
// ...
});
Вот еще один метод, который нам будет частенько нужен:
val() – получение значения первого элемента формы из выборки
val(value) – установка значение всем элементам формы из выборки65
Данный метод отлично работает практически со всеми элементами формы, вот только с
radiobutton"ами установить значение таким образом не получится, тут потребуется
небольшой workaround: $("input").prop("checked", true)
// Можно конечно же использовать и метод click() дабы эмулировать выбор
// необходимо пункта, но это вызовет обработчики click"а, что не желательно
С checbox"ами чуть-чуть попроще: $("input ").prop("checked", true)
Проверяем «чекнутость» простым скриптом: $("input ").prop("checked")
// или чуть более наглядным способом
$("input ").is(":checked")
Проверять и отправлять форму AJAX"ом теперь умеем, теперь осталось решить вопрос с
динамическим изменением формы, и для этого у нас уже есть все необходимые знания,
вот, к примеру, добавление выпадающего списка: $("form").append("");
А если потребуется изменить список? Есть на все случаи жизни: // возьмём список заранее, поберегу чернила
var $select = $("form select");
// добавить новый элемент в выпадающий список
$select.append("Manager");
// выбрать необходимый элемент
$select.val("Value 1");
// или по порядковому номеру, начиная с 0
$select.find("option:eq(2)").prop("selected", true);
// очищаем список
Хорошо, работать с формой теперь можем, осталось прикрутить более вменяемый вывод
ошибок (да-да, за alert() да по рукам): if ($(this).find("input").val() == "") {
$(this).find("input")
.before("Введите имя");
return false;
}
При повторной отправки формы не забудьте убрать сообщения оставшиеся от предыдущей
проверки: $(this).find(".error").remove()
Теперь можно объединить кусочки кода и получить следующий вариант: $("form").submit(function(){
// чистим ошибки
$(this).find(".error").remove();
// проверяем поля формы
if ($(this).find("input").val() == "") {
$(this).find("input")
.before("Введите имя");
return false;
}
// всё хорошо – отправляем запрос на сервер
$.post($(this).attr("action"), // ссылка куда отправляем данные67
$(this).serialize() // данные формы);
return false;
});
Теперь стоит вернуться к списку событий формы, и перечислить недостающие:
focus - фокус на элементе, для работы с данным событием так же есть «shorthand»
метод focus(); может потребоваться, если надо вывести подсказку к элементу
формы при наведении
blur - фокус ушёл с элемента метод blur(), для работы с ним; пригодится при
валидации формы по мере заполнения полей
select - выбор текста в textarea и input метод select(); если
соберётесь разрабатывать свой WYSIWYG, то познакомитесь очень плотно
submit - отправка формы метод submit(); будете использовать частенько
Вот так мы и расправились с «ужасными» формами, возможно я ещё приведу несколько
примеров из реальной жизни, но это будет уже в последующих версиях данного учебника:)
Статья, в которой рассмотрим различные способы простого извлечения данных из HTML формы. А именно познакомимся с тем, как это сделать с помощью метода each, а также методов jQuery специально предназначенных для этого. Объект FormData в данной статье рассматривать не будем.
jQuery – Получения данных формы с помощью метода eachРаботу по извлечению данных c элементов формы посредством метода each рассмотрим на примере.
// создадим пустой объект var $data = {}; // переберём все элементы input, textarea и select формы с id="myForm " $("#myForm").find ("input, textearea, select").each(function() { // добавим новое свойство к объекту $data // имя свойства – значение атрибута name элемента // значение свойства – значение свойство value элемента $data = $(this).val(); });
В минимальном варианте данная последовательность действий состоит из создания пустого объекта JavaScript, перебора элементов формы с помощью метода each и добавления в созданный объект данных соответствующих значениям определённых атрибутов (name и value) элементов.
При необходимости, после получения данных формы можно добавить различные проверки. Это предотвратит отправку не валидных данных на сервер.
Для отправки данных на сервер (например, по технологии AJAX) можно использовать метод jQuery ajax .
// AJAX-запрос, который будет отправлен на сервер: // по адресу: process.php // методом POST // содержащий данные $data // success - это функция, которая будет вызвана после получения ответа от сервера // (сам ответ доступен посредством аргумента result) $.ajax({ url: "process.php", type: "post", data: $data, success: function(result) { // действия при получения ответа (result) от сервера } });
jQuery - Сериализация формыВ jQuery для получения всех полей формы input , textarea и select можно использовать следующие методы:
- serialize() - предназначен для сериализации данных формы в строку запроса. имяПоля1=значение1&имяПоля2=значение2...
- serializeArray() - выполняет кодирование элементов формы в массив, состоящий из имен и значений. [ { name: "имяПоля1", value: "значение1" }, { name: "имяПоля2", value: "значение2" }, ... ]
Методы jQuery serialize и serializeArray оличаются друг от друга только форматом вывода данных. Метод serialize обычно применяется в том случае, когда результат (данные формы) необходимо положить в строку HTTP запроса. Метод serializeArray наоборот, используется тогда, когда результат, который он предоставил, как правило, ещё необходимо обработать.
Например , рассмотрим, как можно перебрать массив, который вернул метод serializeArray , с помощью функции each:
// создание массива объектов из данных формы var data = $("#myForm").serializeArray(); // переберём каждое значение массива и выведем его в формате имяЭлемента=значение в консоль $.each(data,function(){ console.log(this.name+"="+this.value); });
Если же вы собираете данные для того чтобы их передать в метод библиотеки jQuery ajax , то в этом случае неважно, какой из этих методов использовать. Т.к. данный метод может принимать данные, закодированные как с помощью метода serialize , так и посредством serializeArray .
Для того чтобы элемент был сериализован методом serialize или serializeArray , он должен отвечать критериям "successful controls" , указанным в спецификации HTML. Первое условие "successful controls" – это наличие у элемента атрибута name . Второе , если форма отправлена не с помощью кнопки submit , то она (имя и значение кнопки) не будет добавлена в возвращаемую методом строку или массив. Третье , значения из элементов checkboxes и radio кнопок (input с type "radio" или "checkbox") будут включены в набор только в том случае, если они установлены (отмечены). Четвёртое , элементы, которые отключены, обработаны не будут. Т.е. для того чтобы элемент был сериализован, он должен иметь false в качестве значение свойства disabled (другими словами, у элемента обязан отсутствовать атрибут disabled).
Внимание: Методы serialize и serializeArray не сериализуют данные из элементов, которые используются для выбора файлов.
Разберём пример , в котором в зависимости от нажатай кнопки в форме соберём данные с помощью метода serialize или serializeArray . Для отправки данных на сервер и получения от него ответа будем использовать функцию jQuery ajax . Ответ, который прийдёт с сервера вставим в элемент с идентиикатором form_result .
Ваше имя:
Ваш телефон:
Ваше сообщение:
$(function() {
// при нажатию на кнопку с типом submit
$("#orderCallBack input").click(function(e) {
// отменяем стандартное поведение браузера
e.preventDefault();
// переменная, которая будет содержать данные серилизации
var $data;
// в зависимости от того какую нажали кнопку, выполняем
// серилизацию тем или иным способом
if ($(this).attr("data-method") == "serialize") {
$data = $(this).parent("form").serialize();
} else {
$data = $(this).parent("form").serializeArray();
}
// для отправки данных будем использовать технологию ajax
// url - адрес скрипта, с помощью которого будем обрабатывать форму на сервере
// type - метод отправки запроса (POST)
// data - данные, которые необходимо передать серверу
// success - функция, которая будет вызвана, когда ответ прийдёт с сервера
$.ajax({
url: $(this).parent("form").attr("action"),
type: "post",
data: $data,
success: function(result) {
$("#form_result").html(result);
}
})
});
});
PHP код, обрабатывающий ajax запрос на сервере:
Вышеприведёный код просто формирует строку из данных формы на сервере, которая затем будет отправлена клиенту (браузеру).
Обработка форм
»» В данной статье используется . Сохраните эту страницу для тестирования приведенных ниже примеров.
jQuery предоставляет ряд методов, предназначенных для обработки событий, связанных с формой. Сейчас имеет смысл освежить ваши знания в этой области, поскольку формы являются предметом нашего рассмотрения. Интересующие нас методы и события, которые им соответствуют, описывались в статье «Использование прямых методов событий» , далее мы более подробно рассмотрим эти события.
Реагирование на изменение фокуса формыМетоды blur() и focus() позволяют реагировать на изменения состояния фокуса формы. Обычно эта возможность используется для того, чтобы помочь пользователю сориентироваться в том, какой элемент имеет фокус (и, таким образом, какой элемент будет принимать вводимые данные). Соответствующий пример приведен ниже:
$(function() { $("input").bind("focus blur", function(e) { var borderVal = e.type == "focus" ? "medium solid green" : ""; $(this).css("border", borderVal); }); });
В этом примере мы выбираем все элементы input и регистрируем функцию в качестве обработчика обоих событий - focus и blur. Эта функция выделяет элемент зеленой рамкой, когда он принимает фокус, и убирает рамку, когда фокус теряется:
Обратите внимание на то, что здесь использован селектор input. Иными словами, элементы выбираются по дескриптору. В некоторых браузерах этот селектор действует более широко и, в частности, выбирает элементы button, способные инициировать отправку формы. Это означает, что при использовании расширенного селектора граница будет применяться не только к элементам input, но и к элементу button.
Реагирование на изменение значений формыСобытие change запускается, когда пользователь изменяет значение элемента form. Это событие особенно полезно, если вы предоставляете совокупную информацию, основанную на значениях, введенных в форме. В примере ниже показано, как это событие можно использовать в документе, представляющем сайт цветочного магазина, для отслеживания общего объема заказа:
$(function() { var total = $("#buttonDiv") .prepend("Общий объем заказа: 0") .css({clear: "both", padding: "5px"}); $("").appendTo("body").append(total).css("clear: left"); $("input").change(function(e) { var total = 0; $("input").each(function(index, elem) { total += Number($(elem).val()); }); $("#total").text(total); }); });
В этом примере в ответ на событие change вычисляется сумма всех значений, введенных в полях input, и результат отображается в элементе span, который перед этим был добавлен в документ. Обратите внимание на то, что для получения значений элементов input используется метод val().
Реагирование на отправку формыК более сложным операциям, которые можно выполнять по отношению к формам, относятся те, что связаны с отменой действий браузера по умолчанию, предусмотренных для элементов формы. Простой пример приведен ниже.
1. Плагин для создания онлайн форм «jFormer»Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.
2. Пошаговая форма регистрации с использованием jQueryАккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.
3. Пошаговая формаЗаполнение формы в несколько шагов с проверкой правильности заполнения.
4. Контактная форма для сайтаПроверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.
5. Анимированное переключение между формами на jQueryАнимированное переключение с помощью jQuery между формой входа на сайт, формой регистрации и полем для восстановления пароля. На демонстрационной странице нажмите на желтую ссылку для того чтобы увидеть эффект.
6. Выезжающая PHP форма обратной связиПодобное решение можно использовать для того, чтобы дать посетителю возможность быстро связаться с владельцем сайта с любой страницы. На демонстрационной странице нажмите на стрелочку снизу, чтобы выехала форма.
7. PHP форма регистрации с использованием jQuery и CSS3Форма с проверкой правильности ввода информации.
8. PHP форма регистрации в стиле FacebookСимпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.
9. jQuery контактная форма «SheepIt»Реализована возможность перед отправкой сообщения добавлять новые поля.
10. Контактная форма «Fancy AJAX Contact Form»Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.
11. Система авторизации/регистрации на сайте 12. Форма отправки данныхС проверкой правильности заполнения.
13. Плагин jQuery «Contactable»Для реализации выезжающей формы обратной связи для быстрой отправки сообщения.
