На веб-странице уже существует традиционная HTML-форма, которую модернизировали для отправки данных через AJAX с помощью плагина jQuery Form.
Теперь в форме необходимо организовать предварительную проверку данных, вводимых пользователем.
Решение
Для решения этой задачи воспользуемся плагином jQuery Validate (листинг 14.2.1).
Листинг 1 4 .2 .1 . Использование плагина jQuery Validate
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-14-2-1</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="css/form.css" rel="stylesheet" /> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script> <script src="js/jquery.form.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#myForm").validate({ rules: { Name: { required: true, minlength: 2, maxlength: 12 }, Email: { required: true, email: true }, Url: { url: true }, Colors: { required: true }, Text: { required: true, maxlength: 24 }, Password: { required: true, rangelength: [6, 24] }, ConfirmPassword: { required: true, equalTo: "#Password" }, Avatar: { accept: "jpg|gif|png" }, Agree: "required", Radio: "required", Examine: { required: true, equal: 13 } }, messages: { Name: { required: "Укажите свое имя!", minlength: "Не менее 2 символов", maxlength: "Не более 12 символов" }, Email: { required: "Нужно указать email адрес", email: "e-mail введен неверно" }, Url: { url: "Неправильно введен URL" }, Colors: { required: "Нужно выбрать цвет" }, Text: { required: "Вы забыли ввести текст", maxlength: "Не более 24 символов" }, Password: { required: "Надо ввести пароль", rangelength: "От 6 до 24 символов" }, ConfirmPassword: { required: "Подтвердите пароль", equalTo: "Подтверждение не принято" }, Avatar: { accept: "Только jpg, gif или png" }, Agree: "Нужно отметить чекбокс", Radio: "Нужно сделать выбор...", Examine: { required: "Надо решить этот пример", equal: "Вы в школе учились?" } }, submitHandler: function(form) { $(form).ajaxSubmit({ target: "#output", timeout: 3000 }); }, errorPlacement: function(error, element) { error.appendTo( element.parent() .find("label[for='" + element.attr("name") + "']") .find("em") ); } }); $.validator.addMethod("equal", function(value, element, params) { return value == params; }); }); </script> </head> <body> <form id="myForm" action="form.php" method="post"> <label for="Name">Имя: (*)<em></em></label> <input id="Name" name="Name" type="text" value="" /><br /> <label for="Email">E-mail: (*)<em></em></label> <input id="Email" name="Email" type="text" value="" /><br /> <label for="Url">URL:<em></em></label> <input id="Url" name="Url" type="text" value="" /><br /> <label for="Colors">Select: (*)<em></em></label> <select id="Colors" name="Colors"> <option value=""></option> <option value="red">Красный</option> <option value="orange">Оранжевый</option> <option value="yellow">Желтый</option> <option value="green">Зеленый</option> <option value="blue">Голубой</option> <option value="deepblue">Синий</option> <option value="violet">Фиолетовый</option> </select><br /> <label for="Text">Textarea: (*)<em></em></label> <textarea id="Text" name="Text" rows="1" cols="20"></textarea><br /> <label for="Password">Пароль: (*)<em></em></label> <input id="Password" name="Password" type="password" /><br /> <label for="ConfirmPassword">Еще раз: (*)<em></em></label> <input id="ConfirmPassword" name="ConfirmPassword" type="password" /><br /> <label for="Avatar">Файл:<em></em></label> <input id="Avatar" name="Avatar" type="file" /><br /> <label for="Agree">Чекбокс (*)<em></em></label> <input class="cb" id="Agree" name="Agree" type="checkbox" /><br /> <label for="Radio">Радио: (*)<em></em></label> <input class="rb" type="radio" name="Radio" value="1" /> <input class="rb" type="radio" name="Radio" value="2" /> <input class="rb" type="radio" name="Radio" value="3" /><br /> <label for="Examine">6 + 7 = (*)<em></em></label> <input id="Examine" name="Examine" type="text" value="" /><br /> <input id="reset" type="reset" name="resetButton" value="Reset" /> <input class="img" type="image" name="submitButton" value="Submit" src="img/form.gif" /> </form> </body> </html> |
Обсуждение
Не стоит пугаться внушительного объема кода, который содержит листинг 14.2.1. Настолько большой пример приведен с практической целью — показать организацию проверки данных, подразумевающих ввод по определенным правилам. Например, правильность ввода e-mail-адреса, URL страницы и т. д.
Детальное знакомство с примером начнем с рассмотрения HTML-кода. Первый элемент, который нам встретится в body, — элемент div с идентификатором
#output. Сюда будет выводиться ответ от сервера. Конечно в том случае, если данные из формы будут успешно отправлены. А пока про него можно забыть.
Дальше следует форма, содержащая практически все возможные элементы, которые только могут встречаться в формах. Элементы input типа text, password, file, checkbox, radio, reset, image, а также элементы select и textarea.
В таком виде, даже без подключения внешних JavaScript-файлов, эта форма вполне функциональна, и данные, введенные пользователем, будут отправлены на сервер. Но поскольку перед нами стоит задача проверки данных на стороне клиента, вернемся к разделу head веб-страницы и посмотрим, какие файлы потребуется подключить.
Первым идет файл стилевого оформления формы — css/form.css, за ним подключаем необходимые JavaScript-файлы. Файл библиотеки jQuery — js/jquery-1.5.2.min.js, файл плагина jQuery Validate — js/jquery.validate.js и файл плагина jQuery Form — js/jquery.form.js.
ПРИМЕЧАНИЕ
Совместное использование плагинов jQuery Form и jQuery Validate совершенно не обязательно. Плагин jQuery Validate может функционировать и отдельно.
Вот мы добрались до самого главного и интересного — наиболее подробно разберем JavaScript-код, который будет обеспечивать проверку правильности заполнения полей формы.
Сначала отслеживаем момент готовности DOM, затем выбираем форму по ее идентификатору #myForm и связываем с ней функциональность плагина jQuery Validate. При этом мы передаем плагину некоторые опции — rules, messages, submitHandler и errorPlacement.
Опции rules и messages кажутся очень похожими. Значения обеих опций — объекты, названия свойств которых соответствуют атрибутам name полей формы. Значения этих свойств — тоже объекты (допустима строка, если правило проверки единственное), пары ключ/значение которых описывают правила проверки для полей с соответствующим именем (для опции rules), и сообщения, выводимые пользователю при нарушении этих правил (для опции messages).
Объяснение получилось довольно запутанным, но у нас есть листинг кода, изучая который можно все хорошо понять. Разберем для примера одно поле формы, самое первое, предназначенное для ввода имени. В атрибуте name этого элемента указано значение Name, поэтому соответствующим ему свойством объекта rules является свойство с именем Name. Его значение — объект, в котором определены три свойства: required, minlength и maxlength. Значение true, указанное в свойстве required, сообщит плагину о том, что поле Name обязательно для заполнения, значение 2, указанное в свойстве minlength, ограничивает минимальную длину текста в этом поле двумя знаками, а значение 12 в свойстве maxlength задает максимальную длину текста.
Правила проверки для других полей создаются аналогично. Обратите внимание на свойства email или url. Значение true, переданное в этих опциях, заставит плагин проверять данные, введенные в эти поля, на соответствие форматам записи e-mailадреса и URL страницы.
В messages все похоже — для каждого правила из опции rules в опции messages создается пара. Только значениями в этом случае являются текстовые сообщения, выводимые пользователю при некорректном заполнении соответствующего поля формы.
Отдельно от этого ряда стоит проверка поля Examine. Это поле обязательно для заполнения, о чем свидетельствует опция required со значением true. В это поле должно быть введено число 13, указанное в свойстве equal. Но проблема в том, что такого метода проверки в плагине нет и, если мы не предпримем какие-либо действия, все наши труды не увенчаются успехом.
К счастью, в плагине предусмотрена возможность добавления собственных методов проверки. Воспользуемся этим и создадим нужный метод (листинг 14.2.1а).
Листинг 14.2.1 а . Использование плагина jQuery Validate
[code language=”javascript”]
$.validator.addMethod(“equal”,
function(value, element, params) { return value == params;
});
Первый аргумент, принимаемый методом addMethod, — строка, в которой передается имя добавляемого метода. В нашем случае это equal. Второй аргумент — функция, выполняющая необходимую проверку. Функция принимает три аргумента: аргумент value — это значение, введенное в поле формы, element — объект, характеризующий соответствующий HTML-элемент, и params — значение опции, с которой сравнивается введенное значение. Функция должна возвращать значения true или false в зависимости от результатов проверки. В примере из листинга 14.2.1а видно, что при совпадении значений аргументов value и params функция вернет true, в противном случае — false.
Метод addMethod может принимать еще и третий, необязательный аргумент, который может быть как строкой, так и функцией и определяет сообщение по умолчанию, выводимое пользователю при несоблюдении условий проверки.
Теперь вернемся к еще не рассмотренным опциям — submitHandler и errorPlacement. Функция, которую мы определим в опции submitHandler, будет вызвана при насту-
плении события submit формы в том случае, если все поля формы заполнены в соответствии с указанными правилами. В качестве единственного аргумента функция
принимает форму. Внутри функции для этой формы вызываем метод ajaxSubmit() уже знакомого нам плагина jQuery Form и передаем ему некоторые настройки. Например, в опции target указываем значение #output — идентификатор того элемента div, куда будет выводиться ответ от сервера.
Еще одна опция, присутствующая в этом примере, — errorPlacement. В ней можно определить функцию, которая будет обрабатывать ошибки проверки полей формы. Функция принимает два аргумента — error и element. Аргумент error содержит текст сообщения о произошедшей ошибке, а аргумент element — это объект, характеризующий элемент, в котором ошибка произошла.
Листинг 14.2.1 б. Использование плагина jQuery Validate
[code language=”javascript”]
function(error, element)
{ error.appendTo(element.parent()
.find(“label[for='”
+ element.attr(“name”) + “‘]”)
.find(“em”));
}
Функция, которую мы определили в опции errorPlacement, приведена еще раз в листинге 14.2.1б. Внутри функции мы вызываем метод appendTo() библиотеки jQuery. Метод appendTo() применен к error (это сообщение об ошибке), а аргументом метода appendTo() является выражение, которое помогает обнаружить тот са-
мый элемент, куда необходимо вставить сообщение об ошибке. Читайте внимательно! Сначала, с помощью метода parent() находим родительский элемент по отношению к тому, что был передан в аргументе element, затем вызываем метод find(), чтобы обнаружить элемент label с атрибутом for, значение которого соответствует атрибуту name того элемента, где произошла ошибка (если внимательно посмотрите HTML-код формы, то обнаружите, что они одинаковые), и наконец снова используем метод find() — получаем элемент em, находящийся внутри только что найденного элемента label. Именно в элемент em и будет вставлен текст сообщения об ошибке.
Конечно, мы разобрали не все возможные варианты применения плагина jQuery Validate, но он обладает настолько большим набором разнообразных опций, дополнительных методов, что для полного описания потребовалась бы отдельная книга. Более подробную информацию по работе с плагином можно обнаружить на официальном сайте jQuery по адресу http://docs.jquery.com/Plugins/Validation. Много примеров доступно на сайте разработчика плагина по адресу http:// jquery.bassistance.de/validate/demo/.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Изменение высоты строки (межстрочного интервала) в тексте (0)
- Центрирование текста (0)
- Изменение стиля маркеров списка или удаление маркеров (0)
- Организация табличных данных:удобство доступа и наглядность (0)
- Интерпретация сообщений, выводимых инструментом W3C Validator (0)
- Отображение строкового элемента как блочного, и наоборот (0)
- Как избежать смещения следующего элемента вверх при использовании свойства float (0)