1 Форма в jQuery.

Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
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


Чувашия-это моя Россия

Форма в jQuery.

Формы на веб-страницах необходимы для сбора информации от посетителей сайтов: электронных адресов для рассылки новостей, данных, необходимых для покупки товара, для обратной связи с клиентами. Формы также заставляют пользователя думать: читать надписи, вводить информацию, делать выбор и т. д. Бывают сайты целиком зависят от получения данных с помощью форм. Язык JavaScript придает формам интерактивность и делает их более легкими в использовании и точно отвечающими запросам посетителей сайта.

Язык HTML предлагает разнообразные теги для построения веб-форм. Наиболее важен тег < form>, определяющий начало ( открывающий тег < form>) и конец ( закрывающий тег < /form>) формы. Он также указывает на метод, который форма использует для передачи данных ( отправка post или получение get).

Вы создаете средства управления формой — кнопки, текстовые поля и меню — с помощью тегов < input>, < textarea> или < select> соответственно. Большинство элементов форм применяют тег < input>. Текстовые поля, поля для ввода пароля, переключатели, флажки и кнопки подтверждения используют один и тот же тег < input>. Вы указываете, к какому элементу относится тег, используя атрибут type. Создаете текстовое поле с помощью тега < input> и устанавливаете атрибут type на значение text:

                    < input name="user" type="text">

Вот, код программы для создания некоторой формы:

                       < form action="sozdaem.php" method="post"
                                              name="pust" id="pust">
                       < div>
                       < label for="username" class = "label">Имя< /label>
                       < input name="username" type="text" id="username"
                                                                  size="32">
                       < /div>
                       < div>< span class="label">Интересы< /span>
                       < input type="checkbox" name="interesi" id="knopki"
                                                         value="knopki">
                       < label for="heliskiing">Шашки< /lаbеl>
                       < input type="checkbox" name="interesi" id="pervij"
                                                             value="pervij">
                       < label fоr="pervij">Рубка дров< /label>
                       < input type="checkbox" name="interesi" id="vtoroj"
                                                             value="vtoroj">
                       < label for="vtoroj">Стирка белья< /label>
                       < /div>
                       < div>
                       < label for="planet" class="label">Гороскоп< /label>
                       < select name="planet" id="planet">
                       < option>Земля< /option>
                       < option>Венера< /option>
                       < option>Водолей< /option>
                       < option>Вы это не знали?< /option>
                       < /select>
                       < /div>
                       < div class="labelBlock">Желаете получать авторассылку?
                       < /div>
                       < div class="indent">
                       < input type="radio" name="spam" id="yes"
                                               value="yes" checked="checked">
                       < label for="yes">Да< /label>
                       < input type="radio" name="spam" id="definitely"
                                                          value="definitely">
                       < label for="definitely">Согласен< /label>
                       < input type="radio" name="spam" id="choice"
                                                             value="choice">
                       < label for="choice">Отказаться нельзя?< /label>
                       < /div>
                       < div>
                       < input type="submit" name="submit" id="submit"
                                                         value="Отправить">
                       < /div>
                       < /form>

Результат Вы видите ниже.

Регистрация:

Интересы
Желаете получать авторассылку?

Тег label есть штатный тег применяемый в формах jQuery. Как Вы видите тег < label>...< /label> не создает элемент управления формой типа кнопки. Тег label добавляет видимую на странице комментарий для конкретного элемента формы.

Тут не создан файл sozdaem.php, куда должна стекаться вся информация по регистрации формы для посетителей, то есть это всего лишь шаблон, но никак не действующая форма, тем более ссылку на файл sozdaem.php убрал.

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

Библиотека jQuery может использовать любой селектор CSS для выбора элементов страницы. Простейшим способом выбора элемента формы является присвоение ему id:

                       < input name="user" type="text" id="user">

Далее Вы можете использовать функцию выбора jQuery:

                      var userField = $('#user');

Если Вы хотите определить значение, введенное посетителем в поле и поле формы имеет id="user", то Вы можете использовать jQuery для доступа к значению поля:

                     var fieldValue = $('#user').val();

А если Вы хотите выбрать все элементы формы какого-то типа? Ну, Вам нужно добавить события щелчка для всех переключателей на странице. Поскольку тег < input> используется не только переключателями, но и текстовыми полями, полями ввода пароля, флажками, кнопками подтверждения, кнопками сброса и скрытыми полями, то Вы не можете выбрать тег < input>. Для того Вы должны иметь возможность определить конкретный тип тега < input>.

Библиотека j Query дает возможность выбора типов полей формы. Используя один из селекторов jQuery, Вы можете определить все поля определенного типа и работать с ними.

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

                      $(':text')

Далее прорабатываете результаты с помощью функции each().

Библиотека jQuery имеет ряд селекторов, облегчающих работу с конкретными типами полей формы:

                       Селектор	          Пример	            Описание
                        :input	         $(':input')	  Выделяет все элементы типа input,
                                                          textarea, select и button,все элементы формы
                        :text	         $(':text')	      Выбирает все текстовые поля
                        :password	     $(':password')	  Выбирает все поля для ввода пароля
                        :radio	         $(':radio')	  Выбирает все переключатели
                        :checkbox	     $(':checkbox')	  Выбирает все флажки
                        :submit	         $(':submit')	  Выбирает все кнопки подтверждения (отправки)
                        :image	         $(':image')	  Выбирает все кнопки-рисунки
                        :reset	         $(':reset' )	  Выбирает все кнопки сброса
                        :button	         $(':button')	  Выбирает все поля типа button (кнопки)
                        :file	         $(':file')       Выбирает все поля файла (применяется для закачки файла)
                        :hidden	         $(':hidden')	  Выбирает все скрытые поля

Вы можете комбинировать селекторы формы с другими селекторами. Пусть на странице есть две формы, Вы желаете выбрать текстовые поля только в одной из них. Так как форма с полями, которые нужны, имеет id="pust", Вы можете выбрать поля только данной формы следующим образом:

                       $('#pust :text')

Библиотека jQuery имеет фильтры, которые отбирают поля формы, соответствующие определенному состоянию:

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

                      $(':checked')

Этот фильтр можно применять для выяснения того, какой переключатель внутри группы был отмечен. Например, есть группа переключателей («Выберите способ доставки») с различными значениями (например, «Почта», «Курьер» и «Самовывоз»), и надо найти значение переключателя, которое выбрал Ваш посетитель. Данная группа использует один и тот же HTML-атрибут name. Пусть Ваша группа переключателей использует для этого атрибута имя shipping. Применение селектора атрибута jQuery в сочетании с фильтром :checked позволяет найти значение отмеченного переключателя:

                      var checkedValue=$('input[name="shipping"]:checked').val();

Селектор $('input[name="shipping"]') выбирает все элементы ввода с именем shipping, но после добавления части :checked — $('input[name="shipping"] :checked') — только отмеченные элементы. Функция val() возвращает значение, хранящееся в отмеченном элементе, например «Почта».

- :selected выбирает все отмеченные элементы option внутри списка или меню и дает возможность узнать, какой выбор сделал посетитель ( тег < select>). Например, есть тег < select> с id="region", в котором перечислены все области России. Для выяснения того, какую область выбрал посетитель, напишите следующее:

                       var selectedRegion=$('#region :selected').val();

Обратите внимание! в отличие от примера с фильтром :checked, между id и фильтром есть пробел ('#region : selected'), потому что этот фильтр выбирает теги < option>, а не тег < select>. Данный выбор jQuery означает: «Найди все выбранные варианты, находящиеся внутри тега < select> и имеющие id="region". Пробел подобен действию дочернего селектора CSS: сначала находится элемент с нужным id, но потом внутри него ищутся все выбранные элементы, при этом фильтр :selected может возвращать больше одного элемента.

Иногда возникает необходимость проверить значение элемента формы. Например, Вы хотите убедиться, что электронный адрес посетителя введен в нужное поле. Или Вам хочется узнать значение поля для подсчета общей стоимости заказа. Или у Вас есть форма, запрашивающая информацию как по платежу, так и по доставке заказа. Тогда было бы полезно с помощью флажка «Аналогично информации по платежу» предоставить Вашим клиентам возможность заполнять поля для сведений о доставке автоматически на основе данных, взятых из полей, содержащих платежную информацию. Библиотека jQuery имеет функцию для выполнения обеих задач. Функция val() может как задавать, так и считывать значения поля формы. Если Вы вызываете ее без передачи аргументов, она будет считывать значения; при передаче функции значения она введет его в поле формы. Пусть имеется поле для ввода электронного адреса клиента с id="email" тогда значение можно выяснить, введя следующий код:

                       var fieldValue = $('#email').val();

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

                       1 var unitCost=9.95;
                       2 var amount=$('quantity').val(); // получить значение
                       3 var total=amount*unitCost;
                       4 total=total.toFixed(2);
                       5 $('#total').val(total); // задать значение

Строка 1 кода программы создает переменную, которая хранит значение цены товара. Строка 2 создает еще одну переменную и извлекает значение, введенное посетителем в поле с id="quantity", соответствующее количеству заказанного товара. Строка 3 кода программы определяет общую стоимость, полученную путем умножения цены на количество, а строка 4 форматирует результат, включая в него два знака после запятой. Наконец, строка 5 вводит итоговое значение в поле с id="total".

Хотя функция val() полезна для получения значений любого элемента формы, иногда подобное значение имеет смысл лишь в том случае, если посетитель выбрал какое-то конкретное поле. Например, переключатели и флажки требуют от посетителя сделать выбор определенного значения. Hо как только их найдете, так понадобится способ для определения статуса конкретного переключателя или флажка. В языке HTML атрибут checked определяет, помечен ли данный элемент. Для установки флажка при загрузке веб-страницы надо добавить атрибут checked так:

                                       для XHTML:
                       < input type="checkbox" name="news" id="news" checked="checked" />
                                       для HTML5:
                       < input type="checkbox" name="news" id="news" checked>

так как checked является атрибутом языка HTML, то можно использовать библиотеку jQuery для проверки статуса флажка:

                       if ($('#news').attr('checked')) {
                              // флажок установлен
                                } else {
                             // флажок сброшен }

Код $('#news'). attr('checked') возвращает значение true, если флажок установлен. Если он сброшен, возвращается значение undefined, интерпретируемое JavaScript как false. Таким образом, данное условное выражение позволяет выполнить один набор задач, если флажок установлен, либо другой набор задач, если флажок сброшен. Атрибут checked применим и к переключателям. Вы можете использовать функцию attr() таким же образом, чтобы проверить, установлен ли атрибут checked для переключателя.

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

Когда посетитель подтверждает заполнение формы нажатием кнопки Подтвердить (Submit) или клавиши Enter, происходит событие submit. Вы можете выполнить скрипт во время подтверждения формы. Таким образом, код JavaScript может верифицировать поля формы на предмет их корректного заполнения. Когда форма подтверждена, тогда программа JavaScript проверяет поля и при обнаружении ошибок останавливает передачу и сообщает посетителю причину отказа. Если все заполнено верно, то форма передается как обычно.

Для выполнения функции при наступлении события подтверждения формы сначала выберите форму, затем примените функцию jQuery submit(), чтобы добавить скрипт. Допустим требуется убедиться, что при передаче формы "Регистрация" поле с именем заполнено, то есть посетитель не должен оставить его незаполненным. Сделать это можно путем добавления события подтверждения в форму и проверки значения поля перед ее отправкой. Если поле пусто, то Вам нужно дать знать об этом посетителю и остановить процесс передачи формы; в противном случае форма будет передана с пустым полем. Если посмотрите на HTML-код формы "Регистрация", то увидите, что форма имеет id="pust", а поле ввода имени — id="username". Верифицировать ( то есть проверить) эту форму с помощью библиотеки jQuery можно так:

                       1 $(document).ready(function() {
                       2 $('pust').submit(function () {
                       3 if ($('#username').val() == '') {
                       4 alert('Введите имя в поле "Имя".');
                       5 return false;
                       6 }
                       7 }); // конец submit()
                       8 }); // конец ready()

Строка 1 вводит необходимую функцию $(document).ready(), так что код выполняется только после загрузки HTML-кода страницы. Строка 2 присоединяет функцию к событию формы submit. Строки 3-6 выполняют верификацию ( проверку). Строка 3 проверяет, не является ли значение поля пустой строкой (' '). Если поле пусто, то появляется окно оповещения, дающее посетителю понять, что он ошибся. Строка 5 очень важна: она останавливает процесс передачи формы. Если пропустить этот шаг, то форма будет передана без имени пользователя. Строка 6 завершает условное выражение, а строка 7 является окончанием функции submit().

Остановить отправку формы можно также с помощью функции объекта события preventDefault().

Событие submit применяется только к формам, так что сначала должны выбрать форму, а затем присоединить к ней функцию события submit. Выбор формы осуществляется с помощью id, содержащегося в HTML-теге < form>. Есть ли страница имеет единственную форму, с использованием селектора элемента:

                       $('form').submit(function() {
                            // код, выполняемый во время отправки формы
                       }) ;

Когда текстовый курсор находится в текстовом поле (либо после щелчка по полю кнопкой мыши, либо при переходе в него с помощью клавиши Tab), оно переходит в состояние, называемое focus. Фокус представляет собой событие, запускаемое браузером и указывающее на то, что текстовый курсор находится в конкретном поле. Вы можете быть уверены, что именно здесь сосредоточено внимание посетителя. Некоторые дизайнеры применяют его для удаления любого текста, который уже присутствует в поле. Пусть имеется HTML-код внутри формы:

                       < input name="username" type="text" id="username" 
                              value="Пoжaлyйcтa, введите Ваше имя пользователя">

Этот код создает текстовое поле в форме с текстом "Пoжaлyйcтa, введите Ваше имя пользователя" внутри него. Этот метод позволяет давать пользователю указания по заполнению формы. Посетитель не должен сам стирать ненужный текст, Вы это делаете автоматически при активации поля:

                        1 $('#username').focus(function() {
                        2 var field = $(this);
                        3 if (field.val()==field.attr('defaultValue')) {
                        4 field.val(' ');
                        5 }
                        6 });

Строка 1 выбирает поле c id="username" и присваивает функцию событию focus. Строка 2 создает переменную field, которая хранит ссылку на выборку jQuery; ключевое слово $(this) ссылается на выбранный элемент внутри функции jQuery — на поле формы. Строка 4 стирает содержимое поля. Она задает новое значение поля - пустую строку (' '), удаляя таким образом любое присутствующее в поле значение. Однако не нужно обнулять это поле всякий раз, когда оно оказывается в фокусе. Например, пользователь выделил поле и вместо прежней надписи "Пожалуйста, введите ваше имя пользователя" ввел свое имя. Если затем текстовый курсор покинет данное поле, а потом вернется, то введенное имя не должно исчезнуть. Вот тогда вступает в игру условное выражение, содержащееся в строке 3. Текстовые поля имеют атрибут defaultValue, представляющий текст, содержащийся в поле при первой загрузке страницы. Даже если Вы стерли этот текст, браузер будет его помнить. Условная инструкция проверяет, соответствует ли текущий текст поля field.val() тому, который был первоначально - field.attr('defaultValue'). Если текст совпадает, то интерпретатор JavaScript стирает текст в поле.

Рассмотрим данный процесс подробнее. В примере свыше при загрузке HTML-кода в текстовом поле был текст "Пожалуйста, введите Ваше имя пользователя". Это первоначальное значение поля, т.е. defaultValue. Когда посетитель впервые переходит в поле, условная инструкция задает вопрос: " Совпадает ли текущее содержимое поля с тем содержимым, которое было в нем при загрузке страницы?", то есть эквивалентна ли запись " Пожалуйста, введите Ваше имя пользователя" записи " Пожалуйста, введите Ваше имя пользователя". Ответ положителен, поэтому поле очищается. Однако если Вы, к примеру, ввели в качестве имени пользователя " Привет, Маша!", затем перешли в следующее поле, но вдруг осознали, что ошиблись с именем, то, вернувшись назад, Вы вновь запускаете событие фокуса и функцию, присвоенную данному событию. Инструкция спрашивает: «Эквивалентна ли запись " Привет, Маша!" записи " Пожалуйста, введите Ваше имя пользователя?". На этот раз ответ отрицателен и текст поля не стирается, а Вы можете исправить свою ошибку.

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

                        < input name="quantity" type="text" id="quantity">

Вы хотите убедиться, что поле содержит только числа (т. е. 1,2 или 9, но не «Один», «Два» или «Девять»). Вы можете это сделать после того, как посетитель покинул данное поле:

                       1 $('#quantity').blur(function() {
                       2 var fieldValue=$(this).val();
                       3 if (isNaN(fieldvalue)) {
                       4 alert('Пожалуйста, введите число');
                       5 }
                       6 });

Строка 1 присваивает событию blur функцию. Строка 2 извлекает значение поля и сохраняет его в переменной fieldValue. Строка 3 проверяет числовую запись значения методом isNaN(). Если значение не является числом, выполняется строка 4 и выводится сообщение об ошибке.

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

Как и в случае с другими событиями, можете использовать функцию jQuery click() для ее присвоения событию щелчка по полю формы:

                      $(':radio 1).click(function() {
                           //функция будет применена к каждому переключателю при щелчке по нему
                      }) ;

Событие щелчка кнопкой мыши применимо и к текстовым полям, но не так же, как в случае с событием фокуса. Событие focus запускается при переходе (клавишей Tab) или при щелчке в текстовом поле, событие же щелчка происходит только при щелчке кнопкой мыши в текстовом поле.

Событие change применяется к меню формы. Сделав выбор в меню, запускаете событие смены. Вы можете использовать его для выполнения функции верификации; Вы можете запрограммировать изменение формы на основании выбора пункта меню. Например, можете выполнить функцию таким образом, чтобы при выборе варианта из первого меню, изменялись бы пункты второго меню.

Событие change меню формы позволяет делать интересные вещи, когда пользователь выбирает пункт меню. Выбор пункта из первого меню динамически изменяет список пунктов, представленных во втором меню. Выбрав товар из первого меню, во втором меню получите варианты доступных цветов для данного товара. Для применения к меню события change используйте функцию jQuery change(). Пусть имеется меню с id="country" с названиями стран; Когда делается новый выбор, Вы хотите быть уверены, что новое значение не соответствует тексту «Выберите страну». В данном случае используйте следующий код:

                      $('#country').change(function() { 
                      if ($(this).val()=='Выберите страну') {
                        alert('Пожалуйста, выберите страну из данного меню.');
                          }
                        });

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

Обычно для того чтобы начать заполнение формы, Вы должны установить текстовый курсор в первое текстовое поле и начать вводить текст. Если страница предусматривает авторизацию, зачем заставлять посетителей перемещать указатель мыши на нужное место и только потом вводить текст? Почему бы просто не поместить текстовый курсор сразу в нужное поле, подготовив его таким образом к вводу данных? С JavaScript сделать это просто. Секрет заключается в фокусе, который является не просто событием, на которое код JavaScript может отреагировать, но и командой, которую Вы можете отдать, чтобы поместить текстовый курсор в текстовое поле. Вы просто выбираете текстовое поле, после чего выполняете функцию jQuery focus().

Предположим, Вы хотите, чтобы при загрузке страницы текстовый курсор был помещен в поле ввода имени для формы " Регистрация". Если посмотрите на HTML-код этой формы свыше, то увидите, что это поле имеет id="username". Чтобы с помощью кода JavaScript поместить текстовый курсор в это поле, напишите следующее:

                        $(document).ready(function() {
                        $('#username').focus();
                        });

В данном примере текстовое поле имеет id="username". Однако можете создать универсальный скрипт, который всегда будет вводить в фокус первое текстовое поле формы без необходимости присвоения ему id:

                       $(document).ready(function() {
                       $(':text: first').focus();
                       });

Библиотека jQuery представляет удобный способ выбора всех текстовых полей — $(':text'). Добавляя к селектору фрагмент кода :first можете выбрать первый экземпляр данного элемента, так что селектор jQuery $(':text:first') выбирает первое текстовое поле на странице. Добавление части .focus() устанавливает текстовый курсор в данное поле, которое терпеливо ожидает ввода данных со стороны посетителя.

Если страница содержит более одной формы, например, формы " Поиск по сайту" или " Подпишитесь на рассылку новостей", то нужно уточнить селектор для идентификации формы, чье текстовое поле должно получить фокус. Чтобы первым полем, в котором окажется текстовый курсор, было поле формы для подписки, хотя первым текстовым полем по очереди является поле поисковой формы. Чтобы задать фокус нужному полю, просто добавьте id (в нашем случае pust) в форму и примените этот код:

                      $(document).ready(function() {
                      $('#pust :text:first').focus();
                      });

Теперь селектор $('#pust :text:first') выбирает только первое поле внутри формы для подписки.

Поля формы обычно предназначены для заполнения. В конце концов, какой толк от текстового поля, которое нельзя заполнить? Однако бывает так, что Вы не хотите, чтобы посетитель заполнял текстовые поля, устанавливал флажки или выбирал вариант из меню. Пусть имеется поле, которое следует заполнять, только если для предыдущего поля установлен флажок. Например, форма для определения подоходного налога имеет поле ввода номера социального страхования супруги. Заполняется оно только в том случае, если Вы женаты ( нереальный бланк заполнения). Чтобы "отключить" поле формы, не предназначенное для заполнения, можете деактивировать его с помощью кода JavaScript. Деактивация означает, что возле пункта не может быть установлен флажок или переключатель, в текстовые поля нельзя ввести текст, в меню — выбрать пункт, нельзя также нажать кнопку подтверждения. Чтобы отключить поле, просто задайте для атрибута disabled значение true. Например, для отключения всех полей ввода формы можно использовать следующий код:

                       $(':input').attr('disabled', true);

Обычно выключаете поле в ответ на событие. Пользуясь примером кода программы можете деактивировать поле ввода номера социального страхования супруга, когда нажата кнопка «Холост». Исходя из того, что переключатель для объявления себя холостым имеет id="single", а поле для ввода номера социального страхования супруга — id="spouseSSN", код JavaScript будет выглядеть следующим образом:

                       $('#single').click(function () {
                       $('#spouseSSN').attr('disabled', true);
                       });

Отключая поле, Вы в дальнейшем захотите вновь включить его. Для этого просто задайте для атрибута disabled значение false. Например, для активации всех полей формы используйте код:

                       $(':input').attr('disabled', false);

При отключении поля убедитесь, что применяете логические ( булевы) значения - true или false, а не строки 'true' или 'false'. Например, следующий код ошибочен:

                       $(':input').attr('disabled', 'false'); 
                       
                                 А этот верен:
                                 
                       $(':input').attr('disabled', false);

Вернемся к примеру с нереальной налоговой формой. Если посетитель выбирает параметр «Женат», то он должен помнить, что поле для ввода номера социального страхования супруга имеет активный статус. Полагая, что переключатель для параметра «Женат» имеет id="married", можете добавить такой код:

                       $('#married').click(function() {
                       $('#spouseSSN').attr('disabled', false);
                       });

Иногда получается так, что одна и та же информация отправляется несколько раз. Как этого избежать? Веб-серверы не самые быстрые создания... это же можно сказать и об Интернете. Зачастую имеет место задержка по времени от момента, когда посетитель нажал кнопку отправки, до появления сообщения «Ваша информация получена». Иногда такая задержка бывает достаточно долгой, чтобы нетерпеливые веб-серферы нажали кнопку отправки еще (и еще, и еще) раз, решив, что в первый раз система не сработала. Это приводит к тому, что одна и та же информация может быть отправлена несколько раз. А в случае с онлайновыми продажами это означает, что Вы несколько раз расплатитесь с помощью своей кредитной карты! К счастью, язык JavaScript предоставляет легкий способ деактивировать кнопку подтверждения, как только начался процесс отправки. С помощью атрибута disabled Вы можете сделать так, чтобы эта кнопка больше не нажималась. Исходя из того что форма имеет id="formID", а кнопка передачи — id="submit", сначала добавьте в форму функцию submit, а затем внутри функции отключите кнопку передачи:

                       $('#formID').submit(function() {
                       $('#submit').attr('disabled', true);
                       });

Если на странице присутствует только одна форма, то Вам не нужно использовать id для тегов:

                       $('form').submit(function() {
                       $('input[type=submit]').attr('disabled', true);
                       });

Кроме того, можете изменять сообщение на кнопке передачи. Например, сначала кнопка называется «Передать», а после начала передачи она же гласит «Информация отправляется». Сделать это вы можете следующим образом:

                       $('#formID').submit(function() {
                       var subButton = $(this).find(':submit'); 
                       subButton.attr('disabled', true); 
                       subButton.val('Информация отправляется'); 
                       });

Убедитесь, что данный код помещен внутри функции $(document).ready() таким образом:

                       $(document).ready(function() {
                       $('#formID').submit(function() {
                       var subButton = $(this).find(':submit'); 
                       subButton.attr('disabled', true); 
                       subButton.val('Информация отправляется'); 
                       });
                       });// конец функции  $(document).ready()

Помимо отключения существует еще один способ не утруждать посетителей заполнением ненужных полей — их просто можно скрыть. В примере с нереальной налоговой формой Вы можете просто скрыть поле для ввода номера социального страхования супруга, если выбран пункт " Холост", или показать его, если активирован пункт " Женат". Сделать это можно следующим образом:

                       $('single').click(function () { 
                       $('#spouseSSN').hide(); 
                       });
                       $('#married').click(function() { 
                       $('spouseSSN').show();
                       });

Функции библиотеки jQuery hide() и show() (есть другие функции для отображения и скрывания элементов) для скрытия и проявления элементов выборки на странице сайта. К преимуществам скрывания полей (в противоположность их отключению) относится упрощение макета формы. Отключенное поле остается видимым, что может привлекать ( или отвлекать) внимание пользователя.

Во многих случаях Вам нужно скрыть или показать не просто поле формы: возможно, Вы хотите скрыть название этого поля или любой другой связанный с ним текст. Один из способов — это заключить код, который Вы хотите скрыть (поле, заголовок и т. д.) в тег < div>, присвоить ему id, потом скрыть этот тег < div>.

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

Фокус на поле.

Работа с формой:

  

  

  

  

  


Способ оплаты


  

  

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

Придадим текстовому полю фокус:

                       < script>
                       $(document).ready(function() {
                       $(':text:first').focus();
                       }); // конец ready()
					   < /script>

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

Попробуем выключить или включить два поля формы в ответ на выбор, сделанный посетителем. Если Вы просмотрите форму, то увидите, что в конце раздела с платежной информацией есть три переключателя для выбора способа платежа: Наличными, Visa и MasterCard. Кроме того, есть два поля для ввода номера платежной карты и срока ее действия. Эти две настройки применимы только к платежным картам, но не к платежам с помощью системы Наличными, поэтому Вы должны отключить данные настройки, если переключатель установлен в положение "Наличными".

HTML-код для этого раздела страницы выглядит так (поля формы выделены жирным шрифтом):

                       1 < div>< span class="label">Cnocоб оплаты< /sраn>
                       2 < input type="checkbox" name="interesi" id="knopki" value="knopki">
                       3 < label for="paypal">Наличными< /label>
                       4 < input type="checkbox" name="interesi" id="pervij" value="pervij">
                       5 < label for="visa">Visa< /label>
                       6 < input type="checkbox" name="interesi" id="vtoroj" value="vtoroj">
                       7 < label for="mastercard">MasterCard< /label>
                       8 < /div>
                       9 < div id="creditCard" class="indent">
                      10 < div>
                      11 < label for="cardNumber" class="label">Hoмep карты< /label>
                      12 < input type="text" name="cardNumber" id="cardNumber">
                      13 < /div>
                      14 < div>
                      15 < label for="expiration" class="label">Cpoк действия< /label>
                      16 < input type="text" name="expiration" id="expiration">
                      17 < /div>
                      18 < /div>

Теперь добавьте код, созданный только что. Для начала присвойте функцию событию щелчка для переключателя "Наличными".

В скрипт вверху страницы добавьте код:

                      $(document).ready(function() { 
                      $(':text:first').focus();
                      $('#knopki').click (function() { }); // конец click
                      }); // конец ready()

Переключатель для способа платежа "Наличными" имеет id="knopki". Для выбора данного поля достаточно написать: $('#knopki'). Остальная часть кода присваивает анонимную функцию событию щелчка. Установка переключателя в положение "Наличными" не только осуществляет выбор способа ( это обычное поведение браузера), но и запускает функцию, которую Вы создадите далее. Теперь Вы отключите поля для ввода номера платежной карты и срока ее действия, поскольку эти данные не применимы, если выбран вид платежа "Наличными".

Внутри анонимной функции, созданной в предыдущем шаге, добавьте новую строку кода:

                      1	$(document).ready(function() {
                      2	$(':text:first').focus();
                      3	$('#paypal1).click(function() {
                      4	$('#creditCard input').attr('disabled', true);
                      5	}); // конец click
                      6	}); // конец ready ()

Задача отключения двух полей формы решается с помощью одной строки кода. Оба поля расположены внутри тега < div> с id="creditCard". Поэтому селектор jQuery $('#creditCard input') означает выбрать все теги < input> внутри элемента id="creditCard". Данный подход обеспечивает выбор всех полей ввода, так что при добавлении еще одного поля ввода, например, CVV ( три цифры на обратной стороне карты, которые могут быть нужны для обеспечения безопасности заказа), оно также будет выделено.

Чтобы отключить поля, Вам остается задать значение true для атрибута disabled. Однако это действие не затрагивает названия полей («Номер карты» и «Срок действия»). Хотя сами поля деактивированы, названия полей по-прежнему выделены ярким жирным шрифтом, давая ложный сигнал пользователю о том, что поля доступны для заполнения. Для наглядной демонстрации неактивного состояния полей следует изменить цвет их названий на светло-серый. Вместе с этим Вы поменяете фоновый цвет полей на серый, чтобы они выглядели неактивными.

Добавьте выделенный следующий код программы:

                     1 $(document).ready(function () {
                     2 $(':text:first').focus ();
                     3 $('#knopki').click(function() {
                     4 $('#creditCard input').attr('disabled', true)
                     5 .css('backgroundColor','#CCC');
                     6 $('#creditCard label').css('color','#BBB');
                     7 });// конец click
                     8}); // конец ready()

Сначала используйте функцию jQuery css() для изменения цвета фона текстовых полей ( видите, что соответствующий код является частью строки 4, так что должны вписать его в ту же строку, что и функцию attr()). Потом применить функцию css() для настройки цвета шрифта тегов < label> внутри тега < div>. Теперь просмотрите страницу сайта в браузере, и увидите, что установка переключателя в положение "Наличными" приводит к тому, что поля и их названия «Номер карты» и «Срок действия» становятся тусклыми. Однако если установить переключатель в положение Visa или MasterCard, соответствующие поля остаются неактивными! Вам нужно вновь обеспечить их включение при установке переключателя в любое из этих положений.

После функции click() добавьте пустую строку ( требуется новый код между строками 7 и 8), введите следующий код:

                     $('#visa, #mastercard').click(function() { 
                     $('#creditCard input').attr('disabled', false)
                     .css('backgroundColor',''); 
                     $('#creditCard label')
                     .css('color',''); 
                     }); // конец click

Селектор $('#visa, 'mastercard') выбирает оба переключателя. Внимание! Для удаления цветов фона и текста, добавленных при установке переключателя в положение "Наличными", нужно просто передать пустую строку в качестве значения цвета: $ ('#creditCard label').css('color', '');. Измененный цвет элемента удаляется, но сохраняется цвет по умолчанию, заданный таблицей стилей.

Теперь предстоит полностью скрыть выбранную часть страницы.

Подобно формам заказов наша форма имеет отдельные поля для ввода платежной информации и данных о доставке. Данные сведения идентичны, и нет никакой нужды дважды вводить одну и ту же информацию. Нередко в подобных формах видите пункт " Аналогично информации по платежу", возле которого можно установить флажок. Однако не лучше ли совсем убрать (скрыть) поле, раз оно оказывается ненужным? Тем более язык JavaScript позволяет.

Добавим функцию событию установки флажка " Аналогично информации по платежу". HTML-код данного флажка выглядит так:

                      < input type="checkbox" name="hideShip" id="hideShip">

Введите фрагмент после кода:

                      $('#hideShip').click(function() {
                      });// конец click

Поскольку флажок имеет id="hideShip", код выбирает его и добавляет функцию событию щелчка. В данном случае вместо скрывания одного поля Вам нужно спрятать целую группу полей. Поместите HTML-код, описывающий эти поля, в тег < div> с id="hideShip". Тогда, чтобы спрятать поля, достаточно просто скрыть тег < div>. Однако нужно скрывать эти поля, только если установлен флажок. Если кто-то щелкнет кнопкой мыши дважды, тем самым сбросив флажок, то тег < div> и его поля должны вновь стать видимыми. Поэтому сначала следует выяснить, установлен ли флажок, поэтому добавьте код:

                      $('hideShip').click(function() { 
                      if ($(this).attr('checked')) {}
                      }); // конец click

Простая условная инструкция облегчает проверку состояния флажка для решения относительно отображения или скрывания полей. Ключевое слово $(this) ссылается на объект, по которому производится щелчок — в данном случае на флажок. Атрибут элемента checked позволяет узнать, установлен или сброшен флажок. Если флажок установлен, то атрибут возвращает значение true, если флажок сброшен — false. Вам остается лишь добавить код, обусловливающий скрывание и отображение полей формы:

	                   < script>
	                   $(document) .ready(function () {
	                   $('#name').focus();
	                   $('#knopki').click(function() {
	                   $('#creditCard input').attr('disabled', true)
	                   .css('backgroundColor','#CCC');
	                   $('#creditCard label').css('color','#BBB');
	                   }); // конец click
	                   $('#visa, mastercard').click(function () {
	                   $('#creditCard input').attr('disabled', false)
	                   .css('backgroundColor','');
	                   $('#creditCard label') .css ( 'color','');
                       }); // конец click
                       $('#hideShip') .click(function () {
                       if ($(this).attr('checked')) {
                       $('#shipping').slideUp('fast');
                       } else {
                       $('#shipping').slideDown('fast');
                       }
                       }); // конец click
                       }); // конец ready()
                      < /script>

Селектор $('#shipping') относится к тегу < div>, содержащему поля формы, тогда как функции slideUp() и slideDown() скрывают и показывают тег < div> посредством его перемещения, соответственно, вверх за пределы поля зрения и вниз в поле зрения. Вы можете использовать и другие эффекты библиотеки jQuery, такие как fadeIn() и fadeOut(), или даже создать собственную анимацию, используя функцию animate().

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

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

Процедура проверки правильности ввода информации называется верификацией формы.

С помощью языка JavaScript можно идентифицировать любую ошибку, прежде чем посетитель отправить неправильные сведения. Верификация формы требует проверки полей на предмет наличия в них нужной информации в корректном формате. Верификация обычно происходит во время запуска события отправки формы и производится при нажатии посетителем кнопки подтверждения или клавиши Enter, когда текстовый курсор находится в текстовом поле. Если все в порядке, форма отправляется на веб-сервер. Если же возникает проблема, код программы-скрипт прерывает процесс передачи и выводит сообщение об ошибке — обычно рядом с неправильно заполненным полем.

Удостовериться, что в поле введен текст, довольно легко. Можно воспользоваться свойством формы value с помощью, например, функции jQuery val() и, если значением окажется пустая строка, значит, поле является пустым. Но задача усложняется, если необходимо проверить другие типы полей: флажки, переключатели и меню. Придется написать сложный скрипт JavaScript, если захотите удостовериться, что посетитель ввел информацию определенного типа: электронный адрес, почтовый индекс, числа, даты и т. д. Однако, не придется писать код самому. Библиотека jQuery предоставляет большой выбор скриптов для верификации форм.

Плагин jQuery Validation - это мощный и простой в применении плагин библиотеки jQuery. Плагин jQuery Validation проверяет форму на предмет заполнения нужных полей и соответствия данных определенным требованиям. Поле ввода количества должно содержать число, а поле ввода адреса e-mail — электронный адрес. Если посетитель ввел данные неправильно, плагин выдаст сообщение об ошибке с описанием проблемы. Рассмотрим базовую схему процесса применения плагина Validation:

-Загрузите и присоедините файл jquery.js к странице, которая содержит форму, подлежащую верификации. Плагин Validation использует именно библиотеку jQuery, чем и обусловлено присоединение файла jquery.js.

-Загрузите и присоедините плагин Validation. Данный плагин можно найти по адресу: bassistance.de/jquery-plug- ins/jquery-plug-in-validation/. Архив включает много дополнительного материала, в том числе демонстрации, тесты и др. Вам нужен только файл jquery.validate.min.js .

-Добавьте правила верификации. Правила верификации — это просто инструкции, указывающие " сделать данное поле обязательным для заполнения; убедиться, что данное поле содержит e-mail и т. д.". Вы определяете, какие поля будут проверяться и каким образом. Существуют два способа добавления правил верификации: простой с использованием HTML и более гибкий, но и несколько более сложный.

-Добавьте сообщения об ошибках. Данный этап необязателен. Плагин Validation располагает встроенным набором сообщений об ошибках типа " Это поле обязательно Часть III. Обеспечение интерактивных возможностей веб-страниц для заполнения", " Введите правильную дату", " Введите правильный номер" и т. д. Подобные простые сообщения вполне уместны, но, тем не менее, вы можете настраивать их, чтобы сообщения предоставляли более ясные инструкции для заполнения каждого поля, например, " Введите свое имя" или " Введите дату Вашего рождения". Можете управлять стилем и расположением сообщений.

-Примените функцию validate() к форме. Плагин Validation включает функцию, которая творит все волшебство: validate(). Сначала с помощью библиотеки jQuery выберите форму, а затем примените к выделенной форме функцию. Допустим Ваша форма имеет id="pust". Тогда код HTML будет таким:

                        < forma action="sozdaem.php" method="post" name="pust" id="pust">
        
                                 Простейший способ провести верификацию:
                                 
                        $('#pust') .validate();

Функция validate() принимает в качестве аргумента самую разную информацию, влияющую на работу плагина. Например, хотя Вы можете определить правила верификации и сообщения об ошибках в HTML-коде формы, Вы также можете задавать правила и сообщения при вызове функции validate().

Полный код JavaScript для простой верификации формы (включая уже описанные выше два этапа) можно представить в следующем виде:

                       < script src="js/jquery-1.9.0.min.js">< /script>
                       < script src="js/jquery.validate.min.js">< /script>
                       < script>
                       $(document).ready(function() {
                       $('#pust').validate();
                       }); // конец ready
                       < /script>

Простая верификация. Для применения плагина Validation, надо присоединить JavaScript-файл плагина, добавить нескольких атрибутов class и title к элементам формы, подлежащим проверке, и применить к форме функцию validate(). Метод validate() является простейшим способом верификации. Если же нужно управлять положением сообщений об ошибках, применить к полю формы более одного правила или задать минимум/максимум знаков для текстового поля, то придется воспользоваться расширенным методом.

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

Допустим имеется текстовое поле для ввода имени. Базовый HTML-код может иметь следующий вид:

                       < input name="name" type="text">

Обеспечение интерактивных возможностей веб-страниц.

Плагин Validation включает методы, отвечающие наиболее распространенным требованиям верификации:

                       Правило верификации	                  Описание
                       
                           required	                    Поле обязательно для заполнения, 
                                                        пометки или выбора.
                            date	                    Данные должны иметь формат MM/DD/YYYY. 
                                                        Например, дата 10/30/2009 считается корректной, 
                                                        а 10-30-2009 — нет.
                             url	                    Веб-адрес должен быть записан в полной форме 
                                                        типа http://www.chia-vet.com. Частичный URL-адрес, 
                                                        например, www.chia-vet.com или chia-vet.com, 
                                                        является недействительным.

                            email	                    Электронный адрес должен иметь формат bob@chia-vet.com. 
                                                        Этот класс не проверяет действительность введенного адреса,
                                                        так что даже такой адрес, как nobody@noplace.com, 
                                                        успешно пройдет проверку.

                            number	                    Данные должны быть числом типа 32 или 102.50 или 
                                                        даже -145.5555. Однако ввод символов, например, 
                                                        $45.00 или 100,000, недопустим.
                           digits	                    Данные должны быть положительными целыми числами. 
                                                        Числа 1, 20, 12333 являются корректными, 
                                                        а 10.33 или -12 — нет.
                         creditcard	                    Должен быть введен корректный номер кредитной карты.

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

                       < input name="name" type="text" class="required">

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

Верификация с помощью языка JavaScript — это отличный способ предоставления дружественной обратной связи тем посетителям, которые ошибочно пропустили поле или ввели неверный тип информации. Однако этот способ не является оптимальным для предотвращения злонамеренного ввода данных. Верификацию с помощью JavaScript легко обойти, так что если Вы хотите быть уверены, что не получите от посетителей " плохих" данных, Вам нужно будет также произвести верификацию на стороне сервера.

Требование заполнить поле является самой распространенной задачей верификации, но нередко возникает необходимость удостовериться в том, что введенные данные соответствуют заданному формату. Спрашивая, сколько виджетов необходимо посетителю, Вы ожидаете получить числовое значение. Чтобы поле было обязательным для заполнения и содержало определенный тип значения, следует добавить класс required, а также один из классов свыше в таблице. Допустим имеется поле для ввода даты рождения. Эта информация является не только обязательной, но и должна вводиться в специальном формате. HTML-код для подобного поля может иметь такой вид:

                       < input name="dob" type="text" class="required date">

Как видите, имена классов — required и date — разделены пробелами. Если исключите класс required и примените только тип верификации данных: class="date", тогда поле окажется необязательным для заполнения, но если информация в него все-таки вносится, она должна отвечать заданному формату.

Когда определяете особый формат для данных поля, позаботьтесь об инструкциях для посетителя, поясняющих ему правила ввода информации. Если в поле вводится дата, добавьте рядом с полем сообщение типа " Введите дату в формате 01/25/2009".

Добавление сообщений об ошибках. Плагин Validation располагает набором универсальных сообщений об ошибках. Если обязательное для заполнения поле не содержит данных, появляется сообщение " Это поле является обязательным для заполнения". Если в поле необходимо ввести дату, появится сообщение " Введите правильную дату". Однако вы имеете возможность модифицировать эти сообщения и создавать собственные.

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

             < input name="name" type="text" class="required">
             
                    Для формирования текста сообщения об ошибке 
                                 просто добавьте атрибут title:
             < input name="name" type="text" class="required" 
                      title="Пожалуйста, введите Ваше имя.">

Некоторые применяют атрибут title для удобства пользователя, предоставляя конкретные инструкции, которые появляются при наведении указателя мыши на какое-то поле, или для программ, позволяющих озвучивать текст на экране. Но в случае с плагином Validation этот атрибут служит для создания сообщений, которые хотите вывести на экран. Плагин сканирует все проверяемые поля в поиске атрибута title. Найдя его, плагин использует значение атрибута в качестве текста сообщения об ошибке. При использовании нескольких методов верификации сообщение должно быть адекватным для всех ситуаций. Если у вас есть обязательное для заполнения поле, которое должно содержать дату, сообщение типа " Это поле обязательно для заполнения" бессмысленно для ситуации, когда введена дата в неверном формате. Лучше вывести так:

                       < input name="dob" type="text" class="required date"
                      title="Пожалуйста, введите дату в формате 01/28/2009.">

Задание правил верификации и сообщений об ошибках посредством добавления имен классов и заголовков просто и эффективно. Иногда может понадобиться более сложная проверка. Тогда плагин Validation предлагает дополнительный метод. Если желаете предусмотреть разные сообщения об ошибках в зависимости от их типа: одно — для пустого поля и другое — для неверного формата введенных данных. С помощью стандартного метода верификации, описанного ранее, решить такую задачу невозможно. Плагин Validation предлагает более продвинутый метод проверки, который позволяет применять более широкий диапазон правил верификации.

Расширенный метод нужен для задания минимального количества знаков при вводе данных. Устанавливая пароль, можете ввести требование его минимального размера в шесть знаков.

Сложная верификация. Плагин Validation предоставляет другой способ верификации формы, не требующий изменения HTML-кода полей. Еще существует большое количество дополнительных настроек для управления работой плагина. Они задаются путем передачи функции validate() объектной константы, содержащей отдельные объекты для разных настроек. Например, для указания правила верификации передается объект, содержащий код для этого правила. Сначала вводите открывающую фигурную скобку прямо после первой круглой скобки функции верификации и затем закрывающую — непосредственно перед последней круглой скобкой:

                      $('idOfForm').validate({
                              // сюда помещаются настройки
                      }); // конец validate();

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

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

                      < form action="sozdaem.php" method="post" id="pust">
                      < div>
                      < label fоr="name">Имя< /label> 
                      < input name="name" type="text">
                      < /div> 
                      < div>
                      < label for="email">E-mail< /label> 
                      < input name="email" type="text">
                      < /div> 
                      < div>
                      < input type="submit" name="submit" value="Отправить"> 
                      < /div> 
                      < /form>
  

  

Рассматриваемая форма содержит два текстовых поля: для ввода имени и электронного адреса.

Полный список настроек плагина Validation можно найти по адресу: docs.jquery.com/Plugins/Validation/validate#options.

Сложные правила. Расширенный способ задания правил верификации подразумевает передачу объекта, содержащего имена полей формы, и правила верификации, которые хотите применить к полю. Базовая структура этого объекта выглядит так:

                       rules: {
                       fieldname : 'validationType'
                           }

Объект называется rules, и внутри него Вы определяете поля и типы верификации. Затем объект передается функции validate(). В случае с изображенной формой для определения поля в качестве обязательного для заполнения функция validate() применяется к форме, как описывалось ранее, а затем функции передается объект rules:

                     $ ('#pust').validate({ rules: {
                     name: 'required' }
                     }); // конец validate()

В данном случае поле называется name, а правило указывает на обязательное-заполнение поля. Для применения нескольких правил к этому полю должны создать для него другой объект. Например, для расширения правил верификации для нашей формы можете добавить правило, требующее не только ввод электронного адреса, но и соблюдения корректного формата ввода:

                      1	$('#pust').validate({
                      2	rules: {
                      3	name: 'required',
                      4	email: {
                      5	required:true,
                      6	email:true
                      7	}
                      8	}
                      9	}); // конец validate()

Согласно правилам литералов объектов (объектных констант) JavaScript, Вы должны завершать каждую пару имя/значение, за исключением последней, запятой. Например, в строке 3 после фрагмента name: 'required' должна быть запятая, поскольку далее следует другое правило ( для поля электронного адреса). Строки 4-7 задают правила для поля, содержащего электронный адрес. Поле называется email, как указано в HTML-коде. Фрагмент required: true делает поле обязательным для заполнения, код email: true требует наличия в поле электронного адреса. Вы можете использовать любой из типов верификации. Вы добавляете в форму поле birthday. Для гарантии ввода данных в это поле можно расширить список правил:

                      $('pust').validate({ rules: {
                      name: 'required',
                      email: { required:true, email:true },
                      birthday: 'date'
                       }
                      }); // конец validate()
                      
             Если хотите сделать заполнение поля обязательным,
                                 настройте код таким образом:
                                 
                      $('#pust').validate({ rules: {
                      name: 'required', 
                      email: { required:true, email:true },
                      birthday: {
                      date:true,
                      required:true
                              }
                         }
                      }); // конец validate()

Одной из наиболее полезных вещей, реализуемых с помощью расширенных правил верификации, является настройка минимального и максимального размеров записи. В бланке рекламации можете установить лимит для замечаний, скажем, в 200 знаков, так что клиентам придется высказываться по существу, а не писать роман. Есть правила, определяющие, что вводимые числовые значения должны принадлежать некоторому диапазону; Если не собираетесь принимать данные от Тутанхамона, то не станете принимать даты рождения ранее 1900 г.

-minlength. Поле должно содержать не менее определенного числа знаков. Правило, задающее ввод в поле минимум шести знаков, имеет следующий вид: minlength: 6.

-maxlength. Поле должно содержать не более определенного числа знаков. Правило, задающее ввод в поле не более 100 знаков, записывается так: maxlength:100

-rangelength. Правило, сочетающее minlength и maxlength. Устанавливает минимальное и максимальное число знаков, разрешенных при вводе данных. Правило, задающее ввод в поле минимум шести знаков, но не более 100: rangelength: [6,100]

-min. Поле должно содержать число, равное или большее указанного числа. Например, следующее правило требует, чтобы поле содержало число, и чтобы это число было равным или большим 10. min:10. В данном примере если посетитель введет 8, поле не пройдет проверку, поскольку 8 меньше 10. Аналогично при вводе слова 'восемь' поле также не пройдет верификации и появится сообщение об ошибке.

-max. Задает максимальное число, которое может содержать поле. Например, для гарантии того, что поле содержит число меньше 1000, используется следующий код: max:1000

-range. Правило, сочетающее min и max и задающее диапазон для чисел, вводимых в поле. Например, чтобы обеспечить ввод чисел, не меньших 10, но и не больших 1000, используйте следующий код: range:[10,1000].

-equalTo. Требует, чтобы содержимое поля совпадало с содержимым другого поля. Например, при вводе пароля посетителя часто просят повторить его. Этим проверяется правильность ввода пароля в первый раз. Чтобы применить данный метод, должны сначала задать строку, содержащую правильный селектор jQuery. Например, первое поле пароля имеет id="password". Если хотите обеспечить соответствие содержимого поля " Подтвердите пароль" содержимому первого поля, примените код:

                       equalTo: 'password'

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

                       < input name="password" type="password" id="password">
                       < input name="confirm_password" type="password" id="confirm_password">


Оба поля обязательны для заполнения, а пароль должен содержать от 8 до 16 символов. Наконец, нужно гарантировать, что поле " Подтвердите пароль" совпадает с первым полем для ввода пароля. Допустим, форма имеет id="pust", тогда можете верифицировать эти поля с помощью следующего кода:

                      $('pust').validate( {
                      rules: { 
                      password: { 
                      required:true, rangelength: [8,16] },
                      confirm_password: {
                      equalTo:'#password'
                            }
                         }
                      }); // конец validate()

Сложные сообщения об ошибках. Сообщение об ошибке можно добавлять с помощью атрибута title, содержащего его текст. Однако данный способ не позволяет создавать отдельные сообщения для каждого типа ошибки верификации. Скажем, поле является обязательным для заполнения и должно содержать число. Вам нужно иметь два разных сообщения для каждого типа ошибки: " Это поле обязательно для заполнения" и " Введите число". Вы не можете сделать это с помощью атрибута title. Вместо этого должны передать функции validate() объект JavaScript, содержащий различные сообщения об ошибках, которые хотите отобразить.

Дистанционная верификация. Хотя верификация средствами JavaScript удобна для быстрой проверки введенной пользователем информации, иногда необходимо обратиться к серверу за проверкой правильностью заполнения поля. Допустим имеется форма регистрации, позволяющая посетителю создать имя пользователя для участия в форумах на Вашем сайте. Два человека не могут иметь одинаковое имя пользователя, поэтому представляется целесообразным сообщить посетителю о том, что введенное имя уже используется, еще до того момента, когда он попытается отправить заполненную форму. В этом случае придется обратиться к серверу и узнать о доступности задаваемого имени. Плагин Validation располагает методом remote, позволяющим выполнить такую проверку. Данный метод дает возможность передавать имя, введенное посетителем, на серверную страницу ( типа РНР, JSP, ASP или Cold Fusion), которая проверяет эту информацию и дает ответ в виде возвращаемых значений true ( верификация пройдена) или false ( верификация не пройдена).

Допустим есть поле "username", которое является обязательным для заполнения и не должно содержать имя, уже используемое на сайте. Для создания соответствующего правила для этого поля можете добавить к объекту rules следующий код:

                      username: { required: true,
                      remote: 'check_username.php' }

Удаленный метод принимает строку, содержащую путь от текущей до серверной страницы. Страница называется checkusername.php. Когда плагин пытается проверить поле, он посылает введенное имя пользователя и данные посетителя на страницу checkusername.php, которая определяет, можно ли использовать это имя. Если да, то PHP-страница возвращает слово 'true', если же имя уже задействовано, возвращается слово 'false', и поле не проходит верификацию.

Это делается благодаря технологии Aja. Рабочий пример данного метода можно найти на странице: jquery.bassistance.de/validate/demo/ captcha/. Процесс подобен созданию расширенных правил. Базовая структура объекта messages такова:

                      messages: {
                      fieldname: {
                      methodType: 'Сообщение об ошибке'
                        }
                      }

В предыдущем примере замените часть fieldname именем поля, которое проверяете, a methodType — одним из методов верификации. Например, чтобы совместить методы верификации для полей ввода пароля и сообщения для каждого типа ошибок, добавьте код:

                      $('#pust').validate({ 
                      rules: { 
                      password: { required:true, rangelength: [8,16] },
                      confirm_password: {
                      equalTo:'tpassword' }
                      }, // конец rules
                      messages: { 
                      password: {
                      required: "Пожалуйста, введите пароль.", 
                      rangelength: "Ваш пароль должен содержать от 8 до 16 символов." >,
                      confirm password: {
                      equalTo: "Введенные пароли не совпадают." }
                      } // конец messages
                      }); // конец validate()

Как видите, использование расширенного метода может потребовать множества объектных констант, и масса фигурных скобок может затруднить понимание кода. Хорошей практикой при использовании продвинутого метода верификации является отсутствие спешки и частое тестирование. Вместо того чтобы вводить все правила и сообщения разом, добавьте одно правило, а затем проверьте страницу. Если верификация не сработала, значит, допустили ошибку в коде. Поэтому прежде чем продолжать добавление правил, исправьте ее. После того как закончили с правилами и убедились, что они работают, добавьте объектную константу для сообщения об ошибке.

Настройка стилей для сообщений об ошибках. Когда плагин Validation проверяет форму и находит некорректное поле, происходит следующее: сначала полю добавляется класс, а потом тег < label>, содержащий сообщение об ошибке. Пусть страница имеет такой HTML-код для поля ввода электронного адреса:

                      < input name="email" type="text" class="required">

Если добавите плагин Validation на страницу с этой формой, и посетитель попытается отправить ее, не заполнив поле для электронного адреса, плагин прервет процесс передачи и изменит HTML-код поля, добавив в него дополнительный тег. Новый HTML-код будет иметь следующий вид:

                      < input name="email" type="text" class="required error">
                      < label for="email" generated="true" class="error">
                             Это поле обязательно для заполнения.< /label>

Другими словами, плагин присвоил полю формы имя класса error, а также вставил тег < label> с классом error, содержащий текст сообщения об ошибке. Для изменения вида сообщений об ошибках просто необходимо добавить нужный стиль в таблицу стилей. Чтобы текст сообщения был выделен жирным и красным шрифтом, добавьте этот стиль в таблицу стилей:

                     label.error { 
                     color: #F00; font-weight: bold;
                       }

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

                    input.error, select.error {
                    border: lpx red solid;
                           }

Базовая верификация. В пустой строке прямо под фрагментом $(document).ready введите:

                    $('#pust').validate();

Форма имеет id="pust":

                   < form action="sozdaem.php" method="post" name="pust" id="pust">

Код $('#pust') использует библиотеку jQuery для выбора формы, а функция validate() применяет плагин для ее верификации. Однако верификация невозможна, пока Вы не зададите правила. Прежде всего должны сделать поле ввода имени обязательным для заполнения и настроить сообщение об ошибке. Найдите HTML-код для поля ввода имени:

                     < input name="name" type= "text"id= "name">
                     
                добавьте атрибуты class и title так, чтобы тег выглядел следующим:
                
                     < input name="name" type="text" id="name"
                     class="required" title="Bведите свое имя.">

Часть class="required" кода сообщает плагину Validation о том, что поле является обязательным для заполнения, тогда как атрибут title определяет сообщение, которое увидит посетитель, если не заполнит это поле.

Сохраните страницу, откройте ее в браузере и нажмите кнопку «Отправить». Поскольку имя в поле не введено, справа появляется сообщение. Поздравляем! Вы добавили правило верификации в форму с помощью базового метода. Теперь дополним верификацию правилом для поля «Дата рождения». Если вы не видите сообщения об ошибке, а вместо этого переходите на страницу, подтверждающую отправку формы, значит, верификация не проведена и форма отослана в том виде, в котором составлена. Проверьте шаги 1-4, чтобы убедиться, что вы не допустили опечаток.

Найдите HTML-код для поля " Дата рождения:

                      < input name="dob" type="text" id="dob">

и добавьте атрибуты class и title так, чтобы тег выглядел следующим образом:

                      < input name="dob" type="text" id="dob" class="date" 
                        title="Bведите дату своего рождения в виде: 01/31/2013">

Так как не добавили класс required, заполнение данного поля не является обязательным. Все же, когда посетитель вводит в него данные, атрибут class="date" сообщает плагину необходимость соблюдения формата даты. С помощью атрибута title назначается сообщение для случая, когда поле заполнено неправильно.

Если хотите обязать посетителя заполнить поле " Дата рождения" и сделать это корректно, просто добавьте код required к атрибуту класса. При этом фрагменты date и required должны разделяться пробелом:

                     class="date required"

Вы можете применить тот же метод для верификации меню ( тег < select>). Найдите HTML-код для открывающего тега < select>:

                     < select name="strani" id= "strani">)
                     
               и добавьте атрибуты class и title так, чтобы тег имел следующий вид:
               
               
                     < select name="strani" id="strani" class:"required" 
                                         title="Выбирайте страну.">

Верифицировать меню можно подобно текстовым полям, добавляя атрибуты class и title.

Сложная верификация. Некоторые задумки невозможно выполнить только стандартными методами верификации ( назначить разные сообщения для разных проблем или задать определенное количество знаков для вводимой информации). В этих случаях надо использовать дополнительные возможности плагина Validation в библиотеке jQuery.

Сделаем два правила верификации и два разных сообщения об ошибках для поля ввода электронного адреса и начинаем:

                     $('#pust').validate({
                     }); // конец validate()

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

Далее создадим базовую структуру для добавления правил верификации:

                     $('#pust').validate({
                     rules: { email: { required: true,
                     email: true }
                     } // конец rules 
                     }); // конец validate()

Первая часть email является именем поля, подлежащего проверке, и совпадает с именем поля в HTML-коде. Далее указаны два метода верификации — обязательное заполнения поля, т.е. пользователь должен заполнить форму, если он собирается ее отправить и соответствие вводимой информации формату электронного адреса.

Далее добавьте специальные сообщения об ошибках для данного поля:

                     messages: {
                     } // конец messages

Этот код представляет еще один объект JavaScript, называемый messages. Он будет содержать любые сообщения, которые пожелаете добавить для полей формы и добавьте сообщение для поля электронного адреса, тогда получится:

                    1 $('#pust').validate({
                    2 rules: {
                    3 email: {
                    4 required: true,
                    5 email: true
                    6 }
                    7 }, // конец rules
                    8 messages: {
                    9 email: {
                   10 required: "Введите адрес электронной почты.",
                   11 email: "Неправильный адрес электронной почты."
                   12 }
                   13 } // конец messages
                   14 }); // конец validate(),

Сохраните страницу и просмотрите ее в браузере. Попытайтесь отправить форму, не заполнив поле электронного адреса. Вы должны получить сообщение «Введите адрес электронной почты». Теперь введите в поле любой символ и вновь повторите попытку. На этот раз должны получить сообщение "Неправильный адрес электронной почты.". Если же получили сообщение о том, что форма передана, значит, где-то есть ошибка.

Далее добавьте правила верификации для двух полей с паролем. Отредактируйте объект rules таким образом, чтобы он имел следующий вид:

                    1 rules: {
                    2 email: {
                    3 required: true,
                    4 email: true
                    5 },
                    6 password: {
                    7 required: true,
                    8 rangelength:[8,16]
                    9 },
                   10 confirm_password: {
                   11 equalTo:'#password'
                   12 }
                   13 }, //конец rules

He пропустите запятую в строке 5, она необходима для отделения правил ввода электронного адреса от правил ввода пароля. Первый набор правил применяется к первому полю с паролем. Оно задает обязательность заполнения данного поля и требует для пароля не менее 8, но не более 16 знаков. Второе правило применяется к полю подтверждения пароля и требует, чтобы его содержимое совпадало с содержимым первого поля.

Далее отредактируйте объект messages таким образом, чтобы имел следующий вид:

                    1 messages: {
                    2 email: {
                    3 required: "Введите адрес электронной почты.",
                    4 email: "Неправильный адрес электронной почты."
                    5 },
                    6 password: {
                    7 required: 'Введите пароль',
                    8 rangelength: 'Пароль должен содержать от 8 до 16 символов.'
                    9 },
                   10 confirm_password: {
                   11 equalTo: 'Пароли не совпадают.'
                   12 }
                   13 } // конец messages

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

Найдите HTML-код для первого флажка:

                    < input name= "interesi" type= "checkbox" id= "knopki" value-"knopki">

добавьте атрибуты class и title так, чтобы тег выглядел следующим образом:

                    < input name=""interesi" type="checkbox" id="knopki" value="knopki" 
                                 class="required" title="Отметьте как минимум 1 вариант.">

Здесь пользуетесь стандартным методом проверки, но могли бы применить и расширенный метод, задав правила и сообщения как часть функции validate(), но если нужно только одно правило и одно сообщение, лучше обратиться к базовому методу как к более простому.

В данном случае все флажки имеют одинаковое имя, так что плагин Validation обрабатывает их как группу. Другими словами, это правило верификации применяется ко всем трем флажкам, хотя и добавили атрибуты class и title только для одного флажка. Вы обязали посетителя установить как минимум один флажок, прежде чем он сможет отправить форму.

Найдите HTML-код для первого переключателя:

                    < input type="radio" name-"spatn" id="yes" value="yes">
                    
                    и добавьте атрибуты class и title так, чтобы тег выглядел так:
                    
                    < input type="radio" name="spam" id="yes" value="yes"
                              class="required" title="Bыбирете вариант ответа">

Группа связанных переключателей имеет единое имя ( в данном случае spam), хотя и добавили атрибуты class и title только одному переключателю, они применяются ко всем трем. Поскольку поле обязательно для заполнения, посетитель обязан установить переключатель в одно из положений, прежде чем он сможет отправить форму.

Пока программа корректно не будет работать. Для изменения положения сообщений должны предоставить функции validate() соответствующие инструкции. Плагин Validation размещает сообщение об ошибке непосредственно после поля, к которому применено правило верификации. Это нормально, если сообщение расположено рядом с полем или меню. Но в данном случае сообщение должно находиться в другом месте, желательно после всех флажков или переключателей. Плагин Validation предусматривает способ управления размещением сообщений об ошибках. Вы сами можете создавать собственные правила размещения сообщений путем передачи еще одной объектной константы функции validate().

Найдите скрипт верификации, созданный ранее, введите запятую после закрывающей фигурной скобки для объекта messages (но перед комментарием // конец messages) и напишите:

                     errorPlacement: function(error, element) {
                     if (element.is(":radio")||element, is(":checkbox")) {
                     error.appendTo(element.parent());
                     } else {
                     error.insertAfter(element); }
                     } // конец errorPlacement

Плагин Validation принимает произвольный объект errorPlacement, представляющий собой анонимную функцию, определяющую расположение сообщения об ошибке. Каждая ошибка обрабатывается данной функцией, так что если нужно изменить расположение некоторых сообщений, Вам придется использовать условное выражения для определения элементов формы, чьи ошибки хотите переместить. Функция принимает и сообщение, и элемент формы, к которому относится ошибка, так что можете использовать условную инструкцию для выяснения того, является ли поле флажком или переключателем. Если является, то сообщение об ошибке помещается в конец элемента, содержащего данный флажок или переключатель.

В HTML-коде этой страницы один тег < div> охватывает группу флажков, а другой тег < div> — группу переключателей. Таким образом, сообщение помещается перед закрывающим тегом /div> с помощью функции jQuery appendTo().

В принципе теперь Вы можете написать программу для верификации в целом и полностью, включая функцию $(document).ready() и будет выглядеть она так:

                    1 $(document).ready(function () {
                    2 $('#pust').validate({
                    3 rules: {
                    4 email: {
                    5 required: true,
                    6 email: true
                    7 },
                    8 password: {
                    9 required: true,
                   10 rangelength: [8,16]
                   11 },
                   12 confirm_password: (equalTo:'#password'},
                   13 spam: "required"
                   14 }, //конец rules
                   15 messages: {
                   16 email: {
                   17 required: "Введите адрес электронной почты.",
                   18 email: "Неправильный адрес электронной почты."
                   19 },
                   20 password: {
                   21 required: 'Введите пароль',
                   22 rangelength: 'Пароль должен содержать от 8 до 16 символов.'
                   23 },
                   24 confirm_password: {
                   25 equalTo: 'Пароли не совпадают.'
                   26 }
                   27 }, // конец messages
                   28 errorPlacement: function(error, element) {
                   29 if(element.is(":radio")||element.is(":checkbox")) {
                   30 error.appendTo(element.parent());
                   31 } else {
                   32 error.insertAfter(element);
                   33 }
                   34 } // конец errorPlacement
                   35 }); // конец validate
                   36 }); // конец ready()

Форматирование сообщений об ошибках. Хотя сейчас страница содержит функционирующий метод верификации, сообщения об ошибках выглядят не лучшим образом. Они не просто разбросаны по странице, но и не выделяются так, как надо. Они бы выглядели намного лучше, если бы были напечатаны красным жирным шрифтом и расположены под полями, к которым они имеют отношение. Все это Вы можете сделать с помощью простой таблицы стилей.

В реальной ситуации Вы примените внешнюю таблицу стилей — либо основную, используемую на других страницах Вашего сайта, либо особую, предназначенную только для форм ( например forws.css). Здесь просто добавьте следующее правило CSS в тег < style>:

              < style>
                   #pust label.error { 
                   font-size: 0.8em; 
                   color: #FOO; 
                   font-weight: bold; 
                   display: block;
                   margin-left: 215px;
                    }
              < /style>

Селектор CSS #pust label.error выбирает все теги label с классом error, которые находятся внутри другого элемента с id="pust". В данном случае тег < form> имеет id="pust", и плагин Validation помещает сообщения об ошибках внутрь тега < label> и добавляет класс error.Это правило CSS применимо только к сообщениям внутри данной формы. Свойства CSS сами по себе довольно стандартны: сначала размер шрифта уменьшается до значения .8 еш; цвет изменяется на крас¬ный, а текст выделяется жирным шрифтом. Инструкция display: block приказывает браузеру обращаться с тегом label как с блочным элементом. То есть вместо того чтобы помещать сообщение об ошибке рядом с полем формы, браузер воспринимает ошибку в качестве отдельного абзаца с разрывами строки вверху и внизу. Чтобы выровнять сообщение с полями формы, имеющими отступ в 215 пикселей от левого края главной области, нужно добавить фрагмент кода margin-left: 215рх.

Для еще большей наглядности можете использовать правила CSS для изменения вида некорректно заполненных полей:

                   #pust input.error, #pust select.error { 
                        background: #FFA9B8;
                        border: lpx solid red; 
                        }

seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: