AJAX 1. AJAX изнутри 2. Фреймворк JQuery 3. Формирование и разбор данных в формате XML 4. Передача данных в формате JSON 5. Селекторы 6. Фреймворки JForm. - презентация

1 AJAX 1. AJAX изнутри 2. Фреймворк JQuery 3. Формирование и разбор данных в формате XML 4. Передача данных в формате JSON 5. Селекторы 6. Фреймворки JForm и Validate

2 Селекторы Примеры формирования выпадающих списков обрабатывали событие выбора элемента списка. Это удобнее, чем циклический запуск сценария, или его запуск по окончании загрузки документа. Однако событий, используемых в технологии AJAX для запуска сценариев, именуемых также селекторами, множество. Примеры формирования выпадающих списков обрабатывали событие выбора элемента списка. Это удобнее, чем циклический запуск сценария, или его запуск по окончании загрузки документа. Однако событий, используемых в технологии AJAX для запуска сценариев, именуемых также селекторами, множество. Перечислим и проиллюстрируем основные селекторы. Перечислим и проиллюстрируем основные селекторы.

3 Селекторы Выбор элементов по Id либо ClassName аналогичен используемому в CSS: Выбор элементов по Id либо ClassName аналогичен используемому в CSS: $('#sidebar'); $('#sidebar'); // выбор элемента с id = sidebar // выбор элемента с id = sidebar $('.post'); $('.post'); // выбор элементов с class = post // выбор элементов с class = post $('div#sidebar'); $('div#sidebar'); // выбор элемента div с id = sidebar // выбор элемента div с id = sidebar $('div.post'); $('div.post'); // выбор элементов div с class = post // выбор элементов div с class = post

4 Селекторы Можно бродить по иерархии объектов в объектной модели документа. Простой выбор потомков: Можно бродить по иерархии объектов в объектной модели документа. Простой выбор потомков: $('div span'); $('div span'); // выбор всех span элементов в элементах div // выбор всех span элементов в элементах div Аналогичный результат так же можно, получить используя следующую конструкцию: Аналогичный результат так же можно, получить используя следующую конструкцию: $('div').find('span'); $('div').find('span'); // выбор всех span элементов в элементах div // выбор всех span элементов в элементах div Выбор только непосредственных потомков Выбор только непосредственных потомков $('div > span'); $('div > span'); // выбор всех span элементов в элементах div, // выбор всех span элементов в элементах div, // где span является прямым потомком div'a // где span является прямым потомком div'a

5 Селекторы Так же селекторы можно группировать: Так же селекторы можно группировать: $('div, span'); $('div, span'); // выбор всех div и span элементов // выбор всех div и span элементов Поиск по соседям: Поиск по соседям: $('span + img'); // выбор всех img элементов перед которыми идут span элементы $('span + img'); // выбор всех img элементов перед которыми идут span элементы $('span ~ img'); // выбор всех img элементов после первого элемента span $('span ~ img'); // выбор всех img элементов после первого элемента span $('#banner').prev(); // выбор предыдущего элемента от найденого $('#banner').prev(); // выбор предыдущего элемента от найденого $('#banner').next(); // выбор следующего элемента от найденого $('#banner').next(); // выбор следующего элемента от найденого

6 Селекторы Выбор всех элементов, всех предков, всех потомков Выбор всех элементов, всех предков, всех потомков $('*'); // выбор всех элементов $('*'); // выбор всех элементов $('p > *'); // выбор всех потомков элементов p $('p > *'); // выбор всех потомков элементов p $('p').children(); // -- $('p').children(); // -- $('p').parent(); $('p').parent(); // выбор всех прямых предков элементов p // выбор всех прямых предков элементов p $('* > p'); // выбор всех предков элементов p $('p').parents(); // -- $('* > p'); // выбор всех предков элементов p $('p').parents(); // -- $('p').parents('div'); $('p').parents('div'); // выбор всех предков элемента p, которые есть div // выбор всех предков элемента p, которые есть div

7 Селекторы Фильтров в jQuery реализовано достаточно много: Фильтров в jQuery реализовано достаточно много: $('div:first'); // выбираем первый div в доме $('div:first'); // выбираем первый div в доме $('div:last'); $('div:last'); // выбираем последний div в DOMе // выбираем последний div в DOMе $('div:not(.red)'); // выбираем div'ы у которых нет класса red $('div:not(.red)'); // выбираем div'ы у которых нет класса red $('div:even'); // выбираем четные div'ы $('div:even'); // выбираем четные div'ы $('div:odd'); // выбираем нечетные div'ы $('div:odd'); // выбираем нечетные div'ы $('div:eq(N)'); // выбираем div идущим под номером N в DOMe $('div:eq(N)'); // выбираем div идущим под номером N в DOMe

8 Селекторы $('div:gt(N)'); // выбираем div'ы, индекс которых больше чем N в DOMe $('div:gt(N)'); // выбираем div'ы, индекс которых больше чем N в DOMe $('div:lt(N)'); // выбираем div'ы, индекс которых меньше чем N в DOMe $('div:lt(N)'); // выбираем div'ы, индекс которых меньше чем N в DOMe $(':header'); // выбо заголовоков h1, h2, h3 и т.д. $(':header'); // выбо заголовоков h1, h2, h3 и т.д. $('div:animated'); // выбор элементов с активной анимацией $('div:animated'); // выбор элементов с активной анимацией

9 Селекторы Фильтры по контенту и видимости: Фильтры по контенту и видимости: $('div:contains(text)');// выбираем div'ы содержащие текст $('div:contains(text)');// выбираем div'ы содержащие текст $('div:empty'); // выбираем пустые div'ы $('div:empty'); // выбираем пустые div'ы $('div:has(p)'); // выбираем div'ы которые содержат p $('div:has(p)'); // выбираем div'ы которые содержат p $('div.red').filter('.bold');// выбираем div'ы которые содержат класс red и класс bold $('div.red').filter('.bold');// выбираем div'ы которые содержат класс red и класс bold $('div:hidden'); // выбираем скрытые div'ы $('div:hidden'); // выбираем скрытые div'ы $('div:visible'); // выбираем видимые div'ы $('div:visible'); // выбираем видимые div'ы

10 Селекторы Так же есть фильтры по атрибутам: Так же есть фильтры по атрибутам: $("div[id]"); // выбор всех div с атрибутом id $("div[id]"); // выбор всех div с атрибутом id $("div[title='my']"); // выбор всех div с атрибутом title=my $("div[title='my']"); // выбор всех div с атрибутом title=my $("div[title!='my']"); // выбор всех div с атрибутом title не равного my $("div[title!='my']"); // выбор всех div с атрибутом title не равного my $("div[title^='my']"); // выбор всех div с атрибутом title начинающихся с my $("div[title^='my']"); // выбор всех div с атрибутом title начинающихся с my //,, //,,

11 Селекторы $("div[title$='my']"); // выбор всех div с атрибутом title заканчивающихся на my $("div[title$='my']"); // выбор всех div с атрибутом title заканчивающихся на my //,, //,, $("div[title*='my']"); // выбор всех div с атрибутом title содержащим my $("div[title*='my']"); // выбор всех div с атрибутом title содержащим my //,,, //,,,

12 Селекторы Для работы с элементами форм есть ряд селекторов, позволяющий выбирать по типу элемента и фильтров - enabled/disabled/selected/checked : Для работы с элементами форм есть ряд селекторов, позволяющий выбирать по типу элемента и фильтров - enabled/disabled/selected/checked : $(":text"); // выбор всех input элементов с типом =text $(":text"); // выбор всех input элементов с типом =text $(":radio"); // выбор всех input элементов с типом =radio $(":radio"); // выбор всех input элементов с типом =radio $("input:enabled"); // выбор всех включенных элементов input $("input:enabled"); // выбор всех включенных элементов input $("input:checked"); // выбор всех отмеченных чекбоксов $("input:checked"); // выбор всех отмеченных чекбоксов

13 Селекторы Фильтры так же можно группировать: Фильтры так же можно группировать: $("div[name=city]:visible:has(p)"); $("div[name=city]:visible:has(p)"); // выбор видимого div'a с именем city, который содержит тег p // выбор видимого div'a с именем city, который содержит тег p Приведем так же ряд полезных селекторов для работы с элементами форм: Приведем так же ряд полезных селекторов для работы с элементами форм: $("form select[name=city] option:selected").val(); // получение выбранного(-ых) элементов в селекте city $("form select[name=city] option:selected").val(); // получение выбранного(-ых) элементов в селекте city $("form :radio[name=some]:checked").val(); // получение выбранного значения радиобатона с именем some $("form :radio[name=some]:checked").val(); // получение выбранного значения радиобатона с именем some $("form :checkbox:checked"); // выбор всех выбранных чекбоксов $("form :checkbox:checked"); // выбор всех выбранных чекбоксов

14 Селекторы При работе с элементом SELECT можно порекомендовать еще несколько селекторов. Они максимально полезны в том случае, если список формируется и обрабатывается динамически. В нашем случае это, который заполняется динамически результатом ajax-запроса. При работе с элементом SELECT можно порекомендовать еще несколько селекторов. Они максимально полезны в том случае, если список формируется и обрабатывается динамически. В нашем случае это, который заполняется динамически результатом ajax-запроса. Итак, когда вы работаете с динамически заполняемым списком, вам нужно уметь: Итак, когда вы работаете с динамически заполняемым списком, вам нужно уметь: 1. Удалить все элементы списка 1. Удалить все элементы списка option').remove(); option').remove();

15 Селекторы 2. Добавить в список новый элемент 2. Добавить в список новый элемент Новый элемент списка '); Новый элемент списка '); К примеру, список формируется из XML данных таким образом: К примеру, список формируется из XML данных таким образом: $(xml).find(city').each( function(){ $(xml).find(city').each( function(){ ' +$(this).find(name').text()+' '); }); ' +$(this).find(name').text()+' '); }); Схема здесь проста: мы ищем все теги, обрабатываем их с помощью.each() - находим и загоняем текст в следующий пункт списка. Схема здесь проста: мы ищем все теги, обрабатываем их с помощью.each() - находим и загоняем текст в следующий пункт списка.

16 Селекторы 3. Сделать выделенным последний пункт списка 3. Сделать выделенным последний пункт списка option:last').attr('selected', 'yes'); option:last').attr('selected', 'yes'); 4. Принудительно снять выделение с элемента списка 4. Принудительно снять выделение с элемента списка option:first').removeAttr('selected'); option:first').removeAttr('selected'); 5. Получить значение выделенного пункта из списка 5. Получить значение выделенного пункта из списка

17 Селекторы Тут есть два варианта. Первый, если вы используете аттрибут : Тут есть два варианта. Первый, если вы используете аттрибут : var city = option:selected').val(); var city = option:selected').val(); И второй вариант: вы не задаете value, вас интересует то, что заключено между … : И второй вариант: вы не задаете value, вас интересует то, что заключено между … : var city = option:selected').text(); var city = option:selected').text(); Теперь переменная city содержит нужное нам значение. Теперь переменная city содержит нужное нам значение.

18 Селекторы 6. Проверить, выбран ли какой-нибудь элемент списка. Это нужно делать обязательно, иначе в приложении могут возникнуть проблемы. 6. Проверить, выбран ли какой-нибудь элемент списка. Это нужно делать обязательно, иначе в приложении могут возникнуть проблемы. if( typeof option:selected').text() == 'undefined' ){ if( typeof option:selected').text() == 'undefined' ){ alert('Ни один элемент списка не выбран'); } alert('Ни один элемент списка не выбран'); } 7. Превратить список в автомасштабируемый то есть отобразить в списке ровно столько элементов, сколько в нем есть: 7. Превратить список в автомасштабируемый то есть отобразить в списке ровно столько элементов, сколько в нем есть: option').size()); option').size());

19 Селекторы 8. Сделать недоступным для выбора отдельный элемент 8. Сделать недоступным для выбора отдельный элемент option:contains('текст элемента')').attr('disabled', 'disabled'); option:contains('текст элемента')').attr('disabled', 'disabled'); Разрешить выделение всех ранее недоступных элементов можно так: Разрешить выделение всех ранее недоступных элементов можно так: option:disabled').removeAttr('disabled'); option:disabled').removeAttr('disabled'); Рассмотрим пример. Рассмотрим пример.пример

20 Фреймворки JForm и Validation Плагин jQuery Form позволяет не только сделать новые ajax-формы, но и довольно просто "проапгрейдить" уже существующие формы таким образом, чтобы их можно было использовать вместе с Ajax. Основные методы, ajaxForm и ajaxSubmit, собирают информацию из элементов формы, поддерживают многочисленные опции, использование которых даст полный контроль над передачей данных. Плагин jQuery Form позволяет не только сделать новые ajax-формы, но и довольно просто "проапгрейдить" уже существующие формы таким образом, чтобы их можно было использовать вместе с Ajax. Основные методы, ajaxForm и ajaxSubmit, собирают информацию из элементов формы, поддерживают многочисленные опции, использование которых даст полный контроль над передачей данных.

21 Фреймворки JForm и Validation Выясним, в чем отличие метода ajaxForm от метода ajaxSubmit. Оба метода либо не принимают аргументов, либо принимают один аргумент, который может быть или функцией или объектом (в парах ключ/значение могут быть переданы различные опции). Выясним, в чем отличие метода ajaxForm от метода ajaxSubmit. Оба метода либо не принимают аргументов, либо принимают один аргумент, который может быть или функцией или объектом (в парах ключ/значение могут быть переданы различные опции). Первое отличие состоит в том, что метод ajaxSubmit отправляет данные из формы, а метод ajaxForm - нет. Когда вызывается метод ajaxSubmit, он упорядочивает данные формы в строку запроса и отправляет их серверу. Когда же вызывается метод ajaxForm - он только добавляет необходимое событие в форму таким образом, что можно определить, когда пользователь отправил данные. Первое отличие состоит в том, что метод ajaxSubmit отправляет данные из формы, а метод ajaxForm - нет. Когда вызывается метод ajaxSubmit, он упорядочивает данные формы в строку запроса и отправляет их серверу. Когда же вызывается метод ajaxForm - он только добавляет необходимое событие в форму таким образом, что можно определить, когда пользователь отправил данные.

22 Фреймворки JForm и Validation Второе отличие: при использовании ajaxForm передаваемые значения будут включать пару имя/значение для самой кнопки (как в примере, или координаты клика мышью, если используется картинка). Второе отличие: при использовании ajaxForm передаваемые значения будут включать пару имя/значение для самой кнопки (как в примере, или координаты клика мышью, если используется картинка). Вывод: это не значит, что метод ajaxForm - плохой, а метод ajaxSubmit - хороший. Просто они разные. И какой именно метод использовать - надо решать в каждом конкретном случае. Вывод: это не значит, что метод ajaxForm - плохой, а метод ajaxSubmit - хороший. Просто они разные. И какой именно метод использовать - надо решать в каждом конкретном случае. Давайте теперь познакомимся с доступными опциями, которые принимают оба этих метода. Давайте теперь познакомимся с доступными опциями, которые принимают оба этих метода.

23 Фреймворки JForm и Validation Посмотрим фрагмент кода, чтобы увидеть как задаются опции: Посмотрим фрагмент кода, чтобы увидеть как задаются опции: // готовим объект // готовим объект var options = { var options = { target: "#divToUpdate", target: "#divToUpdate", url: "form.php", url: "form.php", success: function() { success: function() { alert("Спасибо за комментарий!"); alert("Спасибо за комментарий!"); } } }; }; // передаем опции в ajaxSubmit // передаем опции в ajaxSubmit $("#myForm").ajaxSubmit(options) $("#myForm").ajaxSubmit(options)

24 Фреймворки JForm и Validation target - идентифицирует тот элемент (или элементы) на странице, который должен быть обновлен при поступлении ответа от сервера. Значение может быть определено как объект или селектор jQuery или элемент объектной модели документа. Значение по умолчанию - null. target - идентифицирует тот элемент (или элементы) на странице, который должен быть обновлен при поступлении ответа от сервера. Значение может быть определено как объект или селектор jQuery или элемент объектной модели документа. Значение по умолчанию - null. url - URL, куда должны быть переданы данные из формы. Значение по умолчанию - значение атрибута action формы. url - URL, куда должны быть переданы данные из формы. Значение по умолчанию - значение атрибута action формы. type - метод, с помощью которого должны быть отправлены данные из формы (GET или POST). Значение по умолчанию - значение атрибута method формы. Если атрибут не определен, используется метод GET. type - метод, с помощью которого должны быть отправлены данные из формы (GET или POST). Значение по умолчанию - значение атрибута method формы. Если атрибут не определен, используется метод GET.

25 Фреймворки JForm и Validation beforeSubmit - функция, которая будет вызвана до отправки данных из формы. Функция, вызываемая тут, может позволить выполнить какие-либо действия до отправки данных, например проверку введенных данных. И если она возвращает false - данные не будут отправлены на сервер. Принимает три аргумента: массив с данными формы, jQuery- объект формы, объект из опций, определенных в ajaxForm/ajaxSubmit. Массив данных формы принимает такой вид: beforeSubmit - функция, которая будет вызвана до отправки данных из формы. Функция, вызываемая тут, может позволить выполнить какие-либо действия до отправки данных, например проверку введенных данных. И если она возвращает false - данные не будут отправлены на сервер. Принимает три аргумента: массив с данными формы, jQuery- объект формы, объект из опций, определенных в ajaxForm/ajaxSubmit. Массив данных формы принимает такой вид: [ { name: "username", value: "Vasya" }, [ { name: "username", value: "Vasya" }, { name: "password", value: "secret" } ] { name: "password", value: "secret" } ] Значение по умолчанию - null. Значение по умолчанию - null.

26 Фреймворки JForm и Validation success - функция, которая будет вызвана после отправки данных серверу и при условии успешного ответа сервера. Полученные данные - или responseText или responseXML, в зависимости от значения опции dataType. Значение по умолчанию - null. success - функция, которая будет вызвана после отправки данных серверу и при условии успешного ответа сервера. Полученные данные - или responseText или responseXML, в зависимости от значения опции dataType. Значение по умолчанию - null. dataType - определяет ожидаемый тип данных в ответе сервера. Может принимать значения: null, "xml", "script", или "json". Опция позволяет точно определить, как именно должен быть обработан ответ сервера. dataType - определяет ожидаемый тип данных в ответе сервера. Может принимать значения: null, "xml", "script", или "json". Опция позволяет точно определить, как именно должен быть обработан ответ сервера.

27 Фреймворки JForm и Validation - "xml": if dataType == "xml" ответ сервера рассматривается как XML и в success (если опция определена) отправляется значение responseXML; - "xml": if dataType == "xml" ответ сервера рассматривается как XML и в success (если опция определена) отправляется значение responseXML; - "json": if dataType == "json" ответ сервера будет выполнен и передан в success (если опция определена); - "json": if dataType == "json" ответ сервера будет выполнен и передан в success (если опция определена); - "script": if dataType == "script" ответ сервера будет выполнен в глобальном контексте; - "script": if dataType == "script" ответ сервера будет выполнен в глобальном контексте; Значение по умолчанию - null. Значение по умолчанию - null.

28 Фреймворки JForm и Validation semantic - флаг, определяющий должны ли данные передаваться в строгом порядке следования (это происходит медленнее). Упорядочивание данных формы происходит в порядке следования элементов, исключая элементы input, имеющие тип image. Необходимо установить эту опцию в true, если Ваш сервер требует строгого порядка следования, и форма содержит элементы input типа image. Значение по умолчанию - false. semantic - флаг, определяющий должны ли данные передаваться в строгом порядке следования (это происходит медленнее). Упорядочивание данных формы происходит в порядке следования элементов, исключая элементы input, имеющие тип image. Необходимо установить эту опцию в true, если Ваш сервер требует строгого порядка следования, и форма содержит элементы input типа image. Значение по умолчанию - false.

29 Фреймворки JForm и Validation resetForm - флаг, определяющий должна ли форма быть сброшена если передача данных была успешной. Значение по умолчанию - null. resetForm - флаг, определяющий должна ли форма быть сброшена если передача данных была успешной. Значение по умолчанию - null. clearForm - флаг, определяющий должна ли форма быть очищена если передача данных была успешной. Значение по умолчанию - null. clearForm - флаг, определяющий должна ли форма быть очищена если передача данных была успешной. Значение по умолчанию - null. Методы ajaxForm и ajaxSubmit не единственные. Давайте немного познакомимся с остальными. Методы ajaxForm и ajaxSubmit не единственные. Давайте немного познакомимся с остальными.

30 Фреймворки JForm и Validation Метод formSerialize - упорядочивает данные из элементов формы в строку запроса. Метод возвращает строку в формате: name1=value1&name2=value2. Метод formSerialize - упорядочивает данные из элементов формы в строку запроса. Метод возвращает строку в формате: name1=value1&name2=value2. var qString = $("#myFormId").formSerialize(); var qString = $("#myFormId").formSerialize(); //теперь данные могут быть отправлены //теперь данные могут быть отправлены // через $.get, $.post, $.ajax, и т.д. // через $.get, $.post, $.ajax, и т.д. $.post("myscript.php", qString); $.post("myscript.php", qString);

31 Фреймворки JForm и Validation Метод fieldSerialize - упорядочивает данные из элементов формы в строку запроса. Удобно применять, когда требуется упорядочить в строку запроса только часть данных из формы. Метод возвращает строку в формате: name1=value1&name2=value2 Метод fieldSerialize - упорядочивает данные из элементов формы в строку запроса. Удобно применять, когда требуется упорядочить в строку запроса только часть данных из формы. Метод возвращает строку в формате: name1=value1&name2=value2 var qString = $("#myFormId.myFields").fieldSerialize(); var qString = $("#myFormId.myFields").fieldSerialize();

32 Фреймворки JForm и Validation Метод fieldValue - возвращает значения выбранных элементов в виде массива. С версии 0.91, метод всегда возвращает именно массив. Если нет корректных данных, то возвращается пустой массив, в противном случае массив содержит один или более элементов. Метод fieldValue - возвращает значения выбранных элементов в виде массива. С версии 0.91, метод всегда возвращает именно массив. Если нет корректных данных, то возвращается пустой массив, в противном случае массив содержит один или более элементов. var value = $("#myFormId :password").fieldValue(); var value = $("#myFormId :password").fieldValue(); alert("Пароль: " + value[0]); alert("Пароль: " + value[0]); Метод resetForm - сбросит форму в начальное состояние через новый вызов элементов формы из объектной модели документа. Метод resetForm - сбросит форму в начальное состояние через новый вызов элементов формы из объектной модели документа. $("#myFormId").resetForm(); $("#myFormId").resetForm();

33 Фреймворки JForm и Validation Метод clearForm - очищает элементы формы. Этот метод очистит все элементы ввода с типом text, password, textarea, очистит выбор в элементах select и снимет отметки с элементов radio и checkbox. Метод clearForm - очищает элементы формы. Этот метод очистит все элементы ввода с типом text, password, textarea, очистит выбор в элементах select и снимет отметки с элементов radio и checkbox. $("#myFormId").clearForm(); $("#myFormId").clearForm(); Метод clearFields - очищает элементы формы. Удобно применять, когда требуется очистить только часть формы. Метод clearFields - очищает элементы формы. Удобно применять, когда требуется очистить только часть формы. $("#myFormId.myFields").clearFields(); $("#myFormId.myFields").clearFields(); Рассмотрим пример формы и ее работу. Рассмотрим пример формы и ее работу.примерработупримерработу Форма доступна по адресу Форма доступна по адресу

34 Фреймворки JForm и Validation Но любая форма без проверки данных, вводимых пользователем - это серьезная брешь в безопасности ресурса. Поэтому познакомимся с плагином jQuery Validation, который позволит производить проверку вводимых данных "на лету" и, что немаловажно, очень хорошо взаимодействует с плагином jQuery Form. Но любая форма без проверки данных, вводимых пользователем - это серьезная брешь в безопасности ресурса. Поэтому познакомимся с плагином jQuery Validation, который позволит производить проверку вводимых данных "на лету" и, что немаловажно, очень хорошо взаимодействует с плагином jQuery Form. Как обычно, сначала потребуется подключить библиотеку jQuery (jQuery Validation работает с версией и выше). Понятно, что понадобится и jquery.form.js, и собственно query.validate.js - все это подключаем в разделе HEAD нужной страницы. Как обычно, сначала потребуется подключить библиотеку jQuery (jQuery Validation работает с версией и выше). Понятно, что понадобится и jquery.form.js, и собственно query.validate.js - все это подключаем в разделе HEAD нужной страницы.

35 Фреймворки JForm и Validation HTML-код Вы сможете посмотреть в файле примера, доступного по адресу HTML-код Вы сможете посмотреть в файле примера, доступного по адресу HTML-код примера HTML-код примера Отметим только, что стоит следовать следующим рекомендациям по разметке: каждый элемент input или select имеет "свой" элемент label с атрибутом for, значение которого одинаково со значением атрибута id соответствующего элемента input или select. Отметим только, что стоит следовать следующим рекомендациям по разметке: каждый элемент input или select имеет "свой" элемент label с атрибутом for, значение которого одинаково со значением атрибута id соответствующего элемента input или select.

36 Фреймворки JForm и Validation Самое интересное - это основной метод - validate, Самое интересное - это основной метод - validate, $("#myForm").validate({ $("#myForm").validate({ // список опций // список опций }); }); который может принимать огромное количество опций (набор пар ключ/значение) и в соответствии с ними выполнять проверку выбранной формы. Метод validate устанавливает обработчики событий для submit, focus, keyup, blur и click, чтобы переключиться в проверку всей формы или ее отдельных полей. который может принимать огромное количество опций (набор пар ключ/значение) и в соответствии с ними выполнять проверку выбранной формы. Метод validate устанавливает обработчики событий для submit, focus, keyup, blur и click, чтобы переключиться в проверку всей формы или ее отдельных полей.

37 Фреймворки JForm и Validation Приведем наиболее востребованные опции с пояснениями: Приведем наиболее востребованные опции с пояснениями: submitHandler - когда форма корректно заполнена, вызывает обработчик для передачи формы. Заменяет собой передачу формы по умолчанию. В примере используется передача данных через метод ajaxSubmit() плагина jQuery Form. submitHandler - когда форма корректно заполнена, вызывает обработчик для передачи формы. Заменяет собой передачу формы по умолчанию. В примере используется передача данных через метод ajaxSubmit() плагина jQuery Form.

38 Фреймворки JForm и Validation ignore - отменяет проверку полей формы с указанным селектором. В примере ниже - отменяет проверку для всех элементов с классом "ignore". ignore - отменяет проверку полей формы с указанным селектором. В примере ниже - отменяет проверку для всех элементов с классом "ignore". $("#myform").validate({ $("#myform").validate({ ignore: ".ignore" ignore: ".ignore" }); });

39 Фреймворки JForm и Validation rules - пары ключ/значение, описывающие правила проверки. Ключ - это значение атрибута name элемента (или группы элементов для элементов checkbox и radio). Значение - объект (или строка), содержащий пары правило/параметр. Правила могут быть считаны еще и из разметки (классы, атрибуты, метаданные). Эти способы можно комбинировать между собой. rules - пары ключ/значение, описывающие правила проверки. Ключ - это значение атрибута name элемента (или группы элементов для элементов checkbox и radio). Значение - объект (или строка), содержащий пары правило/параметр. Правила могут быть считаны еще и из разметки (классы, атрибуты, метаданные). Эти способы можно комбинировать между собой. $(".selector").validate({ $(".selector").validate({ rules: { // поле name - обязательное rules: { // поле name - обязательное name: "required", // для поля name: "required", // для поля {// заполнение обязательно {// заполнение обязательно required: true, required: true, true// значение д.б. корректным true// значение д.б. корректным } } }); } } });

40 Фреймворки JForm и Validation messages - пары ключ/значение, описывающие сообщения в процессе проверки. Ключ - это значение атрибута name элемента (или группы элементов для элементов checkbox и radio). Значение же его будет отображено для соответствующего элемента. messages - пары ключ/значение, описывающие сообщения в процессе проверки. Ключ - это значение атрибута name элемента (или группы элементов для элементов checkbox и radio). Значение же его будет отображено для соответствующего элемента. onsubmit, onfocusout, onkeyup, onclick - отвечают за инициализацию проверки полей формы по соответствующему событию. По умолчанию все установлены в true. Любые из этих опций можно отключить, установив значение false. onsubmit, onfocusout, onkeyup, onclick - отвечают за инициализацию проверки полей формы по соответствующему событию. По умолчанию все установлены в true. Любые из этих опций можно отключить, установив значение false.

41 Фреймворки JForm и Validation errorPlacement - в качестве значения функция, принимающая два аргумента. Первый - ошибка как объект jQuery, второй - некорректный элемент как объект jQuery. С помощью этой опции сообщение об ошибке может быть выведено в целевой элемент в разметке страницы: errorPlacement - в качестве значения функция, принимающая два аргумента. Первый - ошибка как объект jQuery, второй - некорректный элемент как объект jQuery. С помощью этой опции сообщение об ошибке может быть выведено в целевой элемент в разметке страницы: errorPlacement: function(error, element) { errorPlacement: function(error, element) { var er = element.attr("name"); var er = element.attr("name"); error.appendTo( element.parent() error.appendTo( + er + + er + ""]").find("em") );.find("em") ); } }

42 Фреймворки JForm и Validation В переменную er получаем значение атрибута name элемента, в котором обнаружена ошибка. Сообщение об ошибке добавляем в целевой элемент, который еще надо найти. Находим "родителя" этого элемента, в нем обнаруживаем элемент label с атрибутом for, который имеет значение точно такое же, которое у нас уже хранится в переменной er (помните рекомендации по разметке?), находим в нем целевой элемент em. Вот туда и будет вставлен текст сообщения об ошибке. В переменную er получаем значение атрибута name элемента, в котором обнаружена ошибка. Сообщение об ошибке добавляем в целевой элемент, который еще надо найти. Находим "родителя" этого элемента, в нем обнаруживаем элемент label с атрибутом for, который имеет значение точно такое же, которое у нас уже хранится в переменной er (помните рекомендации по разметке?), находим в нем целевой элемент em. Вот туда и будет вставлен текст сообщения об ошибке.

43 Фреймворки JForm и Validation Плагин jQuery Validation предоставляет целый набор стандартных методов проверки. Плагин jQuery Validation предоставляет целый набор стандартных методов проверки. required( ) - делает элемент обязательным для заполнения. Возвращает false, если элемент пустой (текстовое поле), не отмечен (radio/checkbox) или ничего не выбрано (для select). required( ) - делает элемент обязательным для заполнения. Возвращает false, если элемент пустой (текстовое поле), не отмечен (radio/checkbox) или ничего не выбрано (для select). remote(url) - запрашивает ресурс, расположенный на сервере через $.ajax (XMLHttpRequest) и передает пару ключ/значение, соответствующую атрибуту name проверяемого элемента в GET-запросе. Ответ сервера оценивается как данные в формате JSON и должен вернуть true для корректных данных, и false - для некорректных. remote(url) - запрашивает ресурс, расположенный на сервере через $.ajax (XMLHttpRequest) и передает пару ключ/значение, соответствующую атрибуту name проверяемого элемента в GET-запросе. Ответ сервера оценивается как данные в формате JSON и должен вернуть true для корректных данных, и false - для некорректных.

44 Фреймворки JForm и Validation minlength(length) - элемент ввода будет требовать ввести количество символов не менее, чем указано в length. Работает с текстовыми полями ввода (в т.ч. с password), c select и checkbox. minlength(length) - элемент ввода будет требовать ввести количество символов не менее, чем указано в length. Работает с текстовыми полями ввода (в т.ч. с password), c select и checkbox. maxlength(length) - элемент ввода будет требовать ввести количество символов не более, чем указано в length. Работает с текстовыми полями ввода (в т.ч. с password), c select и checkbox. maxlength(length) - элемент ввода будет требовать ввести количество символов не более, чем указано в length. Работает с текстовыми полями ввода (в т.ч. с password), c select и checkbox. rangelength(range) - элемент ввода будет требовать ввести количество символов, соответствующее диапазону, указанному в range. rangelength(range) - элемент ввода будет требовать ввести количество символов, соответствующее диапазону, указанному в range.

45 Фреймворки JForm и Validation min(value), max(value), range(range) - смысл тот же, только фигурирует уже не количество символов, а числа. min(value), max(value), range(range) - смысл тот же, только фигурирует уже не количество символов, а числа. equalTo(other) - требует, чтобы элемент соответствовал (был эквивалентен) другому элементу, указанному в other. Возвращает true, если это условие выполняется, и false в противном случае. Работает с текстовыми полями. equalTo(other) - требует, чтобы элемент соответствовал (был эквивалентен) другому элементу, указанному в other. Возвращает true, если это условие выполняется, и false в противном случае. Работает с текстовыми полями.

46 Фреймворки JForm и Validation ( ) - делает элемент ввода требующим корректно введенного адреса. Возвращает true, если адрес корректный, и false в противном случае. Работает с текстовыми полями. ( ) - делает элемент ввода требующим корректно введенного адреса. Возвращает true, если адрес корректный, и false в противном случае. Работает с текстовыми полями. url( ) - делает элемент ввода требующим корректно введенного URL (типа, начните с Возвращает true, если URL корректный, и false в противном случае. Работает с текстовыми полями. url( ) - делает элемент ввода требующим корректно введенного URL (типа, начните с Возвращает true, если URL корректный, и false в противном случае. Работает с текстовыми полями.