Вам когда-нибудь приходилось искать скрипты и плагины для валидации произвольных форм и контейнеров? Когда тэг "form" не используемая конструкция? И когда необходимо проверять корректность полей в любое время, а не по зашитым концептуальным механизмам? Можно долго спорить о необходимости соблюдать стандартны и поддерживать отправку данных через полную перезагрузку страницы. Тем не менее, сегодня, большинство web-приложений уже не возможно представить без поддержки javascript-a. Отключите javascript - и сервисы станут бесполезными, несмотря на то, что вы сможете зарегистрироваться, войти и пройтись по нескольким страницам.

Примечание : Речь идет о том, что тег form предназначен для отправки данных методом POST и требует перезагрузки страницы или фрейма. Тем не менее, чем дальше, тем реже используется этот метод, и тем чаще те же самые данные отправляются ajax-ом, которому в общем все равно, какие теги использовались перед формированием данных.

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

Рассмотрим существующие плагины для валидации форм на jQuery

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

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

• Жесткая привязка к тэгу "form" . Поэтому если у вас есть несколько десятков форм, построенных на div-ах или таблицах, и вы твердо решили использовать популярные решения, то готовьтесь потратить кучу времени на ручное добавление тегов и корректировку скриптов и стилей.
• Привязка к именам полей . Некоторые валидаторы привязываются к названиям полей, а это значит написание простыней javasript-а для каждого случая. Если для пары форм это не страшно, то для коллекции это уже означает длительную ручную генерацию кода.
• Отсутствие валидации по требованию , без необходимости инициализации плагина. Вы не можете взять и один раз вручную проверить форму. Нужно правильно составить форму (правда, это везде нужно, но суть не в этом), затем инициализировать движок плагина, который в обязательном порядке привяжет кучу скриптов к элементам формы. И уже после этого вызвать метод isValid, который не всегда доступен в явном виде. Иногда, этот метод еще нужно "как-то" вытащить из внутренних механизмов.

Примечание : С одной стороны, вполне логично, что привязка идет к тегу форм, так как плагины появились "после". С другой стороны, сегодня скрипты позволяют быстро создавать и собирать данные из любых произвольных форм. При определенном уровне любопытства и настойчивости, вы можете легко создать форму только на тэгах "span"(div) и "input", при этом выглядеть она будет точно так же, как и все другие.

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

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

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

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

Пишем скрипт для валидации произвольных форм на jQuery

Сноска: Вам совершенно не обязательно писать приложение с нуля, пример с готовым скриптом и стилями можно скачать по ссылке в конце статьи .

Прежде, чем реализовывать свой механизм, необходимо определиться с его возможностями и ограничениями:

• . Это может быть span, div, table и так далее. Важно то, что форма это отдельный элемент DOM. Сохранение данных с 15 разных контейнеров - это уже не обычная форма, с любой точки зрения.
• Скрипт должен поддерживать как валидацию на лету , так и произвольную проверку любых форм или даже отдельных полей, без каких-либо привязок скриптов или других ограничений.
• Плагин должен быть простым как с точки зрения настройки и запуска, так и с точки зрения организации и кода.
• Необходимо, чтобы его можно было расширить в любое время . Добавить валидаторы. Встроить всплывающие сообщения. И многое другое.
• Настройка валидаторов полей должна быть не только универсальной, но и простой

И первым делом, переходим к самому важному, к определению основного механизма - вызова проверок для полей. Ведь, выбранный алгоритм будет напрямую влиять не только на сложность настройки, но и на количество букв, которое вам придется набирать, чтобы его корректно запустить. Исходя из составленных требований, самым простым механизмом будет вызов валидаторов по наличию классов стилей в атрибуте "class". Во-первых, стили легко задаются и не накладывают серьезных ограничений. Во-вторых, их можно добавлять и убирать в любой момент. В-третьих, если какие-то классы стилей вы уже используете в своем проекте, то их переименование, как в скрипте валидации, так и в полях, решается простой заменой одной строки на другую, без кардинального изменения кода.

Примечание : К сожалению, даже обилие javascript проверок и обработчиков событий не уберегут ни одно приложение от необходимости валидации данных на серверной стороне. Помните, что можно без особых усилий составить и вызвать отправку данных практически на любом браузере.

Составим тестовый проект

Теперь, составим тестовый проект со следующей структурой:

• css - каталог со стилями
  • template.css - файл стилей
• images - каталог для картинок для стилей валидации
  • icon-fail.png - иконка для некорректно заполненного поля
  • icon-ok.png - иконка для правильно заполненного поля
• js - каталог для скриптов
  
  • jquery-validate.js - скрипт валидации произвольных форм
• index.html - тестовая форма

Примечание : При составлении структуры тестового проекта, старайтесь максимально приблизить ее к структуре настоящего проекта. Это поможет вам отловить проблемы, связанные со структурой, еще на этапе разработке.

Файл стилей - template.css

Большую часть файла стилей занимают стили самой формы, что бы демонстрационный пример выглядел привлекательно. Для самого же плагина нужны только первые два правила ".field-input.input-ok" и ".field-input.input-error"

Примечание : Старайтесь добавлять даже к тестовым формам хотя бы минимальны дизайн. Чем ближе тестовый проект будет к реальному, тем больше шансов отловить ошибки и скрытые проблемы. Например, картинка в "background" для проверенных полей будет занимать часть поля. Это означает, что для полей с большим объемом текста необходимо предусматривать отступы в стилях.

Field-input.input-ok{ background: url(../images/icon-ok.png) no-repeat right center #e3ffe5; border: 1px solid #96b796;line-height: 19px; } .field-input.input-error{ background: url(../images/icon-fail.png) no-repeat right center #ffebef; border: 1px solid red;line-height: 19px; } .clear{clear:both;}body{width: 1000px;margin:auto;} .form{float: left;width: 490px;margin-right: 5px;} .form .header{color: blue;font-size: 20px;font-family: georgia;margin-bottom: 10px} .form .label{padding: 5px;padding-left: 0px;font-size: 18px;} .form .field{margin-bottom: 10px;} .form .field-input{padding: 5px;font-size: 15px;width: 400px;} .form .save-button{cursor: pointer;margin-top: 10px;color: white;background: green;border: 1px solid #ddd;padding: 5px 10px;} .form .save-button:hover{background: rgb(60, 176, 60);}

Файл скрипта валидации произвольных форм на jQuery - jquery-valiate.js

Так как скрипт достаточно простой и в самих комментариях подробно описана вся необходимая информация, то файл приводится целиком:

(function (parentObject) { // Проверяем на повторную инициализацию if (parentObject.validation) return; //////////////////////////////////////////////// // Создаем общий интерфейс для валидации форм //////////////////////////////////////////////// parentObject.validation = { _defaultOptions: { // Контейнер. Может быть селектором или элементом container: "", // Селектор для поиска полей fieldSelector: ".field-input", // Проверка в режиме онлайн liveCheck: true, // Селектор для кнопок сабмита submitSelector: ".save-button", // Обработчик, который вызывается после успешной валидации submitHandler: null, // Класс полей с ошибками errorClass: "input-error", // Класс верных полей okClass: "input-ok", // Список валидаторов // Примечание: так как валидатор пустых полей вынесен отдельно, // то пустые строки в других валидаторах считаются как прошедшие validators: { "required": function (str) { return str.length > 0; }, "numeric": function (str) { var regExp = new RegExp("\\-?\\d+((\\.|\\,)\\d{0,})?"); return regExp.test(str) || !str; }, "alpha": function (str) { var regExp = new RegExp("^[а-яА-ЯёЁa-zA-Z\\s]+$"); return regExp.test(str) || !str; }, "alphanumeric": function (str) { var regExp = new RegExp("^[а-яА-ЯёЁa-zA-Z0-9\\s]+$"); return regExp.test(str) || !str; }, "date": function (str) { var regExpISO = new RegExp("(19|20)\\d\\d-((0|1)-(0|\\d)|(0|1)-30|(0|1)-31)"), regExpRU = new RegExp("((0|\\d)\\.(0|1)|30\\.(0|1)|31\\.(0|1))\\.(19|20)\\d\\d"); return (regExpISO.test(str) | regExpRU.test(str)) || !str; }, "datetime": function (str) { var regExpISO = new RegExp("(19|20)\\d\\d-((0|1)-(0|\\d)|(0|1)-30|(0|1)-31) (\\d+):(\\d+)"), regExpRU = new RegExp("((0|\\d)\\.(0|1)|30\\.(0|1)|31\\.(0|1))\\.(19|20)\\d\\d (\\d+):(\\d+)"); return (regExpISO.test(str) | regExpRU.test(str)) || !str; }, "time": function (str) { var regExp = new RegExp("(\\d+):(\\d+)"); return regExp.test(str) || !str; }, "digit": function (str) { var regExp = new RegExp("^+$"); return regExp.test(str) || !str; }, "password": function (str) { var regExp = new RegExp("^[а-яА-ЯёЁa-zA-Z0-9\\s]+$"); return regExp.test(str) || !str; }, "email": function (str) { var regExp = new RegExp("^(+\\.)* +(\\.+)*\\.{2,6}$"); return regExp.test(str) || !str; }, "url": function (str) { var regExp = new RegExp("^((https?|ftp)\\:\\/\\/)?({1})((\\.)|())*\\.({2,6})(\\/?)$"); return regExp.test(str) || !str; } } }, // Функция инициализации // Создает каркас для форм init: function (_options) { var options = $.extend({}, this._defaultOptions, (_options || {})), self = this; // Если указан контейнер (или его селектор), // а так же селектор для полей, // то создаем каркас if (options.container && options.fieldSelector) { // Если есть селектор для кнопок, // то вещаем обработчик на щелчек if (options.submitSelector) { $(options.container).find(options.submitSelector).on("click", function () { if (self.isValid(options)) { // Если указан обработчик, после успешной валиадции, // то вызываем его if (typeof (options.submitHandler) === "function") options.submitHandler(); return true; } else { return false; } }); } // Если нужна проверка в режиме онлайн if (options.liveCheck) { // Проходимся по всем полям и вешаем проверку валидности $(options.container).find(options.fieldSelector).each(function (cnt, item) { $(item).on("click", function () { self.validItem($(item), options) }).on("blur", function () { self.validItem($(item), options) }).on("change", function () { self.validItem($(item), options) }).on("keyup", function () { self.validItem($(item), options) }); }); } } }, // Функция для валидации отдельного элемента validItem: function (item, _options) { var options = $.extend({}, this._defaultOptions, (_options || {})), classList = $(item).attr("class").split(/\s+/), validResult = true; // Проходимся по всем классам в атрибуте "class", // и если находим класс с именем валидатора, то вызываем его $.each(classList, function (index, cl) { // Проверка для повторяющихся полей, // имя поля, которое должно повториться указывается в атрибуте "confirm-field" if (cl === "confirmfield") { validResult &= ($(options.container).find("").val() == $(item).val()); } // Иначе обычная проверка else if (typeof (options.validators) === "function") { validResult &= options.validators(item.val()); } }); // Если поле не прошло валидацию if (!validResult) $(item).addClass(options.errorClass).removeClass(options.okClass); // Поле прошло валидацию else $(item).addClass(options.okClass).removeClass(options.errorClass); // Возвращаем результат return validResult; }, // Проверка всех полей произвольной формы isValid: function (_options) { var options = $.extend({}, this._defaultOptions, (_options || {})), validResult = true, self = this; // Если указан контейнер (или его селектор), а так же селектор для полей, // то проверяем все поля if (options.container && options.fieldSelector) { $(options.container).find(options.fieldSelector).each(function (cnt, item) { validResult &= self.validItem($(item), options); }); } // Возвращаем результат проверки return validResult; }, // Очищаем поля от всех классов стилей, которые были добавлены во время проверки clear: function (_options) { var options = $.extend(true, {}, this._defaultOptions, (_options || {})); if (options.container && options.fieldSelector) { $(options.container).find(options.fieldSelector) .removeClass(options.errorClass).removeClass(options.okClass); } } } })(window);

Тестовая страница с формами - index.html

Тестовая страница достаточно проста. Ее основное пространство занимает html-код самих форм демонстрационного примера. Сам же вызов плагина для создания валидации на лету, а так же запуск ручной валидации по нажатию на кнопку, занимают всего несколько строк.

$(function () { // Валидация через механизм window.validation.init({ container: ".form-1", submitHandler: function () { alert("Валидация первой формы прошла успешно!"); } }); // Ручная валидация, доступная в любой момент $(".form-2 .save-button").on("click", function () { if(window.validation.isValid({ container: ".form-2" })) { alert("Валидация второй формы прошла успешно!"); } }); });


Валидации формы в режиме реального времени Имя Email Подтверждение пароля URL Отправить форму Пример ручной валидации формы Имя Email Пароль (цифры, буквы и пробел) Подтверждение пароля URL Дата форматы ГГГГ-ММ-ДД и ДД.ММ.ГГГГ Отправить форму

Теперь, сохраняем все файлы в проекте, открываем index.html в любом браузере и переходим к первичному тестированию результата.

Смотрим результат выполнения скрипта валидации на jQuery в тестовом проекте

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

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

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

Как видно, в форма слева проводилась валидация на лету. А в форме слева валидация происходила только по нажатию на кнопку "Отправить форму."

Закончив, первичное тестирование, необходимо снова пройтись по возможностям и ограничениям составленным в самом начале:

• Форма хранится в одном произвольном контейнере . - Выполнено . Форма не зависит от конкретного элемента. Обрабатывает произвольный контейнер
• Валидация как на лету, так и вручную . - Выполнено . Валидацию можно производить как на лету, так и вручную
• Плагин должен быть простым - Выполнено . Код очень простой. Настройка форм заняла не более 5 минут. Для запуска плагина понадобилось всего пара строчек
• Можно было расширить в любое время - Выполнено . Добавление валидаторов элементарное. Можно добавить как в опции по умолчанию, так и во время запуска плагина. Так как код простой, то добавить функциональность то же просто.
• Настройка валидаторов должна быть универсальной и простой - Выполнено . Валидаторы указываются через классы стилей.

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

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

В этом уроке, мы узнаем, как написать jquery валидацию форм в режиме реального времени. Если вы хотите увидеть, что у вас получиться, вы можете нажать «ДЕМО» и посмотреть.

Что мы сегодня узнаем? Как мы реализуем jquery валидацию?

Существует множество способов достичь этого, вот самые распространенные из них:

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

Мы можем обвернуть каждое поле в P тег, внутри которого создать SPAN, который будет содержать информацию о валидации поля.

Также можно обвернуть поле P тегом, внутри которого «привыть» SPAN (на лету с помощью jquery).

Это все будет работать, но это не наилучший путь реализации. Почему? Потому, что слишком много лишнего HTML кода в форме ввода, который нам не нужен. Нужно соблюдать .

Мы сделаем это так, как я сделал для себя. На мой взгляд, это наиболее правильное решение, хотя никто так не делает. Честно говоря, я никого не видел, кто бы еще так делал… если знаете, напишите мне в комментарии в конце урока.

Что же мы будем делать?

Мы напишем простую форму, красивую и с чистым семантическим кодом, без лишних тегов.

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

• Определить его позицию в окне (верхний левый угол)
• Определить его ширину
• Так мы будем знать, где находиться его окончание.
• Добавим информацию о валидации в DIV блоке с определенным ID, справа от конкретного поля. Также присвоим соответственные классы.correct или.incorrect.

Заметьте: это также приемлемо для людей не использующих JavaScript в своем браузере. Таковы будут валидированы на серверной стороне.

Структура проекта

Нам нужно будет создать три файла:

index.html

style.css

validate.js

Мы рассмотрим все поэтапно… сначала HTML код, потом необходимые CSS стили, позже мы сфокусируемся на основном - jQuery скрипте валидации формы.

Пишем HTML

Разложим все по полочкам…

Шаг 1 - создаем базовый HTML код

Для начала, создайте файл index.html и вставьте в него этот базовый код. Вы видите, что подключаем jQuery файл внизу, перед validation.js, который содержит наш скрипт валидации.

Шаг 2 - создаем форму, разделенную на три части

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

Персональная информация (имя пользователя, день рождения, пол, транспортное средство).

Email (поле ввода email пользователя).

О себе (краткая информация о пользователе).

Real-Time Form Validation Using jQuery Personal Info Email About You Шаг 3 - добавляем поля и кнопку подтвердить

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

• Три поля INPUT (имя пользователя, дата рождения, email адресс).
• RADIO кнопки, для выбора пола.
• CHECKBOX для транспортных средств пользователя.
• TEXTAREA для информации о пользователе.
• BUTTON для кнопки «Подтвердить».

Мы будем обвертывать каждый LABLE и поле ввода в тег P, чтобы разделить на отдельные блоки. Теперь ваш финальный файл index.html будет выглядеть следующим образом:

Real-Time Form Validation Using jQuery Personal Info

Full name:

Day of birth (dd-mm-yyyy):

I am: Man Woman

I own: car airplane bicycle ship

Email

Email ([email protected]):

About You

Tell us a little bit about yourself:

submit

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

Добавляем CSS

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

Создайте файл style.css, вставьте в него код ниже. Теперь форма с будущей jquery валидацией, выглядит потрясающе. Не так ли?

Body { background: #efefef; margin: 0; padding: 0; border: none; text-align: center; font: normal 13px Georgia, "Times New Roman", Times, serif; color: #222; } #content { width: 500px; margin: 0 auto; margin-bottom: 25px; padding: 0; text-align: left; } fieldset { margin-top: 25px; padding: 15px; border: 1px solid #d1d1d1; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } fieldset legend { font: normal 30px Verdana, Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px #fff; letter-spacing: -1px; color: #273953; } input, textarea { padding: 3px; } label { cursor: pointer; } .block { display: block; } small { letter-spacing: 1px; font-size: 11px; font-style: italic; color: #9e9e9e; } .info { text-align: left; padding: 5px; font-size: 11px; color: #fff; position: absolute; display: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: -1px 1px 2px #a9a9a9; -moz-box-shadow: -1px 1px 2px #a9a9a9; box-shadow: -1px 1px 2px #a9a9a9; } .error { background: #f60000; border: 3px solid #d50000; } .correct { background: #56d800; border: 3px solid #008000; } .wrong { font-weight: bold; color: #e90000; } .normal { font-weight: normal; color: #222; } #send { background: #3f5a81; width: 100%; border: 5px solid #0F1620; font: bold 30px Verdana, sans-serif; color: #fafafa; text-shadow: 1px 1px 1px #0F1620; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } #send:hover { background: #4d76b1; border: 5px solid #253750; color: #fff; } #send:active { text-indent: -10px; }

Пишем jQuery валидацию формы

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

Планируем

Перед тем как будем писать, задайте себе три вопроса:

Что нам нужно от этого скрипта?

Как мы хотим это сделать?

Как мы этого добьемся?

Это понятно, мы хотим, чтобы скрипт проводил валидацию формы. Но как? Мы хотим, чтобы он делал это в режиме реального времени (когда пользователь завершит заполнение поля ввода) и при нажатии на кнопку «Подтвердить». Поэтому нам придется написать несколько функций: отдельно для каждого поля ввода и для всех форм (которая вызовется при нажатии кнопки «Подтвердить»).

Чтобы предотвратить повторение кода, нам нужно будет создать JavaScript объект для этого.

Что нам для этого нужно?

JS объект в нашем случае будет называться jVal , он будет содержать следующие методы:

• jVal.fullName
• jVal.birthDate
• jVal.gender
• jVal.vehicle
• jVal.email
• jVal.about

Переменная, которая будет содержать статус текущей ошибки - jVal.errors. И метод, который проверяет, существуют ли какие-то ошибки и подтверждает отправку формы или отклоняет. Если нашлись какие-то ошибки, направляет пользователя в начало формы, где он может заполнить все поля корректно.

Метод называется - jVal.sendIt

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

Начинаем работу

Основа кода проста, абсолютно весь jquery код будет содержаться внутри этого синтаксиса:

$(document).ready(function(){ jVal = { }; });

Валидация поля имени пользователя

Наш первый метод будет обрабатывать поле «имя пользователя». Вставьте его внутрь jVal объекта, как показано на примере:

Var jVal = { "fullName" : function() { } };

Теперь напишем несколько строк кода внутри метода. Просто вставьте их, далее мы рассмотрим что это значит:

$("body").append(""); var nameInfo = $("#nameInfo"); var ele = $("#fullname"); var pos = ele.offset();

Линия 1: Мы добавляем DIV блок в документ. Class info, придает некий стиль для блока, который определен в файле style.css, также делает его невидимым с помощью display:none; Нащет ID, это для того, чтобы иметь быстрый доступ к этому блоку и манипулировать ним с помощью jQuery. Этот DIV блок будет содержать информацию о валидации поля.

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

Линия 4: Так же как и в предыдущем случае, мы записываем подключение к полю fullname в переменную. Мы также будем использовать его много раз.

jQuery функция offset() возвращает текущую позицию элемента по отношению к документу. Возвращается в виде объекта, который содержит свойства top и left. Мы используем эту функцию для ele, чтобы определить позицию поля ввода.

Теперь допишем еще несколько строк…

NameInfo.css({ top: pos.top-3, left: pos.left+ele.width()+15 });

Как видите, мы начинаем оперировать со стилями блока nameInfo. Конкретно, мы устанавливаем его позицию справа от поля ввода. Для этого, мы подымаем на 3 пикселя вверх (2 строка кода), и двигаем на 15 пикселей справа от поля (3 строка кода).

Мы написали 50% первого метода, доведем дело до конца. Настало время определить, насколько корректно пользователь ввел данные и предпринять меры…

If(ele.val().length < 6) { jVal.errors = true; nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show(); ele.removeClass("normal").addClass("wrong"); } else { nameInfo.removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normal"); }

Выглядит не очень? Бояться нечего…

Линия 1: Проверяем, чтобы имя введенное пользователем не было менее 6 символов.

Линия 2: Устанавливаем переменную jVal.errors на true, так как мы определили, что имя пользователя слишком короткое. Мы будем использовать это далее.

Линия 3: Мы начинаем оперировать нашим nameInfo элементом (в котором выводим информацию). Для начала мы удаляем class correct, и присваиваем class error. Далее мы вставляем контент в nameInfo элемент, это информация о том, что имя должно быть длиннее 6 символов. И наконец то, мы делаем видимым наше сообщение для пользователя.

Линия 4: Мы начинаем оперировать нашим ele элементом (форма ввода имени пользователя). Удаляем класс normal и присваиваем wrong.

Линия 5: Если имя пользователя достаточно длинное, тогда…

Линия 6: Мы начинаем оперировать nameInfo элементом. Если присвоен класс error, удаляем его и присваиваем класс correct. Вставляем внутрь «птичку», чтобы понять что все ОК. И показываем сообщение для пользователя.

Линия 7: Оперируем ele элементом. Удаляем класс wrong, если он применен, и применяем класс normal.

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

$("#fullname").change(jVal.fullName);

Что это значит на человеческом языке: если пользователь изменяет значение поля «Full name» а потом заканчивает с этим, вызывается метод fullName, который проводит валидацию поля.

Теперь ваш файл validate.js должен содержать следующий код:

< 6) { jVal.errors = true; nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show(); ele.removeClass("normal").addClass("wrong"); } else { nameInfo.removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normal"); } } }; // bind jVal.fullName function to "Full name" form field $("#fullname").change(jVal.fullName); });

Валидация поля даты рождения

Теперь все пойдет быстрее. Нам просто нужно сделать копию fullName метода и внести некоторые изменения.

Теперь, скопируйте fullName метод, вставьте его ниже и переименуйте в birthdate. И сделайте следующие изменения:

• Всюду где встречается nameInfo, замените на birthInfo
• Вместо #fullname, используйте #birthday для переменной ele
• Вставьте этот шаблон регулярного выражения ниже выражения birthInfo.css():

var patt = /^{2}\-{2}\-{4}$/i;

• Наше прежнее if() выражения должно быть:

if(!patt.test(ele.val()))

• Сообщение к этому полю будет следующее: type in date in correct format

Вот как должен выглядеть birthdate метод, после внесения этих изменений:

"birthDate" : function (){ $("body").append(""); var birthInfo = $("#birthInfo"); var ele = $("#birthday"); var pos = ele.offset(); birthInfo.css({ top: pos.top-3, left: pos.left+ele.width()+15 }); var patt = /^{2}\-{2}\-{4}$/i; if(!patt.test(ele.val())) { jVal.errors = true; birthInfo.removeClass("correct").addClass("error").html("← type in date in correct format").show(); ele.removeClass("normal").addClass("wrong"); } else { birthInfo.removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normal"); } }

С помощью регулярного выражения (14 строка), мы проверяем, чтобы дата была в формате 28-03-1987. В 16 строке, мы проверяем соответствие даты рождения пользователя с шаблоном регулярного выражения.

И конечно же, нам нужно прикрепить событие change() для поля даты рождения:

$("#birthday").change(jVal.birthDate);

Теперь мы имеем еще один работающий метод валидации формы на jQuery. Отличная работа!

Валидация поля стать

Опять скопируйте метод fullName, переименуйте его в gender и внесите следующие изменения:

• Все nameInfo переименуйте в genderInfo
• Вместо #fullname, примените #woman для переменной ele
• В выражении genderInfo.css(), переменную top измените на top: pos.top-10, и left на left: pos.left+ele.width()+60
• Наше выражение if() должно быть:

if($("input:checked").length === 0)

• Сообщение пользователю будет: are you a man or a woman?

Вот как должен выглядеть метод gender, после изменений:

"gender" : function (){ $("body").append(""); var genderInfo = $("#genderInfo"); var ele = $("#woman"); var pos = ele.offset(); genderInfo.css({ top: pos.top-10, left: pos.left+ele.width()+60 }); if($("input:checked").length === 0) { jVal.errors = true; genderInfo.removeClass("correct").addClass("error").html("← are you a man or a woman?").show(); ele.removeClass("normal").addClass("wrong"); } else { genderInfo..removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normal"); } }

В строке 14 мы проверяем сколько выбрано селекторов radio. Если 0, то пользователь ничего не выбрал, выводим сообщение об ошибке.

И как всегда, прикрепляем gender метод для radio кнопок:

$("input").change(jVal.gender);

Валидация checkers - владение транспортом

Теперь скопируем gender методи и переименуем его в vehicle, внесем следующие изменения:

• Все genderInfo замените на vehicleInfo
• Вместо #woman, впишите #ship для ele.
• В vehicleInfo.css() выражении, значение left должно быть left: pos.left+ele.width()+40
• Наше выражение if() должно теперь быть:

if($("input:checked").length