Проверка формы на jquery. Проверка формы на JavaScript

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

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

В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги

и
• .

  Как оговаривалось в предыдущих публикациях, парный элемент

  создает маркированный список, а
  • — один элемент списка. Для наглядности давайте напишем код простого меню:

    Навигация

    Навигация сайта

    • Главная
    • Новости недели
    • Технологические достижения
    • Чат

    Однако с появлением платформы язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега < menu> . В использовании этот элемент ничем не отличается от маркированных списков.

    Вместо единицы < ul> прописывается < menu> . Однако существенные различия появляются если судить со стороны работы . Так, второй пример ускоряет работу поисковых программ и роботов в . При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

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

    Создадим-ка горизонтальную навигационную модель

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

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

    Для трансформации мы используем свойство css под названием transform . Чтобы указать трансформацию, используется встроенная функция skewX , в которой угол наклона указывается в градусах.

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

    • -ms- (Internet Explorer)
    • -o- (Opera)
    • -webkit- (Chrome, Safari)
    • -moz- (Firefox)

    А теперь полученные знания применим к написанию примера.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

    Горизонтальная панель Главная О компании Продукция Контакты

    Горизонтальная панель li { display: inline-block; margin-right: 6px; background: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); } a { display: block; padding: 18px 35px; color: #fff; transform: skewX(40deg); -webkit-transform: skewX(40deg); -o-transform: skewX(40deg); -ms-transform: skewX(40deg); -moz-transform: skewX(40deg); } li:hover { background: #1C1C1C; }

  • Главная
  • О компании
  • Продукция
  • Контакты
  А теперь вертикально. Я сказал вертикально!

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

  Для этого я воспользовался еще одним свойством css border-radius .

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

  Вертикальная панель li{ display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; } a { color: #fff; } li:hover { background: #1C1C1C; }

  • Главная
  • О компании
  • Продукция
  • Контакты

  Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block , который собственно и отвечал за горизонтальное расположение пунктов навигации.

  Подпункты в меню: выпадающий список

  Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.

  

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

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

  Выпадающий список body { padding-left: 30%; font-size: 18px; } .m-menu { margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background: #FF8C00; } .m-menu > li { position: relative; display: inline-block; } .m-menu a { display: block; margin-left: -2px; padding: 13px; color: #fff; border-left: 3px solid #fff; } .m-menu a:hover { background: #1C1C1C; } .m-menu .s-menu { left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; } .m-menu .s-menu a { border: 1px solid #000; } .m-menu > Главная Продукция Конфеты Торты Печенье Контакты

  Выпадающий список body { padding-left: 30%; font-size: 18px; } .m-menu { margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background: #FF8C00; } .m-menu > li { position: relative; display: inline-block; } .m-menu a { display: block; margin-left: -2px; padding: 13px; color: #fff; border-left: 3px solid #fff; } .m-menu a:hover { background: #1C1C1C; } .m-menu .s-menu { left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; } .m-menu .s-menu a { border: 1px solid #000; } .m-menu > li:hover .s-menu { display: block; }

  • Главная
  • Продукция
    • Конфеты
    • Торты
    • Печенье
  • Контакты

  В данном примере я разделил единицы меню на два класса:

  • m-menu
  • s-menu

  Первый класс отвечает за основное меню, а s-menu – за подменю.

  В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.

  Так, при помощи:hover указывается, как будет вести себя элемент при наведении на него курсора.

  При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.

  Изначально подменю было задано display: none , что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover , значение свойства display меняется на block и поэтому открывается выпадающий список.

  Как видите, реализация такого приема очень простая.

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

  С уважением, Роман Чуешов

  Прочитано: 1010 раз

  Сделайте программный код красивым

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

  Отступы в программе

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

  If intA = 27 Then

  objCbar.Visible = True

  If intA = 27 Then

  If txtChooseColor.Text = Беж Then

  For Each objCbar In CommandBars

  If objCbar.Name = Моя панель инструментов Then

  If objCbar.Visible = False Then

  objCbar.Visible = True

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

  Из книги Искусство обмана автора Митник Кевин

  «Сделайте это сейчас» Не каждый, кто использует тактику социальной инженерии, является идеальным социальным инженером. Любой, кто владеет внутренней информацией компании, может принести опасность. Риск тем больше для тех компаний, которые хранят в своих файлах и базах

  Из книги Интернет-разведка [Руководство к действию] автора Ющук Евгений Леонидович

  Программный комплекс «Intellectum.BIS» Основное предназначение продукта – обеспечение экспертов-маркетологов и аналитиков инструментарием обработки информации для выполнения бизнес-исследований в целях обеспечения информацией руководства для принятия управленческих

  Из книги Журнал "Компьютерра" №705 автора Журнал «Компьютерра»

  Сделайте тише Автор: Владимир ГуриевВ августе 2007 года я побывал на Hungaroring, венгерском этапе Formula 1. Все знакомые - а особенно фанаты Formula 1 - мне, разумеется, завидовали, и я, как честный человек, старался не обманывать их ожиданий и на вопросы типа "ну как оно там?"

  Из книги Язык программирования С# 2005 и платформа.NET 2.0. автора Троелсен Эндрю

  Программный код агента Если открыть сгенерированный файл агента, вы найдете там тип, который получается из System.Web.Services.Protocols.SoapHttpClientProtocol (если, конечно, вы не указали другой протокол связи с помощью опции /protocol).public partial class CalculatorWebService: System.Web.Services.Protocols.SoapHttpClientProtocol { …}Этот

  Из книги TCP/IP Архитектура, протоколы, реализация (включая IP версии 6 и IP Security) автора Фейт Сидни М

  2.2.4 Программный интерфейс RPC Хотя и не так широко распространенный, как socket, программный интерфейс вызова удаленных процедур (Remote Procedure Call - RPC) для соединений типа клиент/сервер достаточно часто используется в различных системах. Первоначально он был реализован в

  Из книги VBA для чайников автора Каммингс Стив

  Сделайте паузу! Ключ к отладке программы кроется в режиме паузы VBA. Режим паузы - это временная остановка выполнения программы на некотором операторе в программном коде. Поскольку в этом случае программа еще живет", вы получаете возможность проверить текущие значения

  Из книги Интернет для ваших родителей автора Щербина Александр

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

  Из книги Удвоение продаж в интернет-магазине автора Парабеллум Андрей Алексеевич

  Сделайте процесс заказа логичным Большинство пользователей путают непоследовательный (нелинейный) процесс оплаты – непонятно, как купить товар, или вызывает сложности сама покупка. Если в вашем интернет-магазине при оплате заказа есть такие подшаги, как «Создание

  Из книги ПК без напряга автора Жвалевский Андрей Валентинович

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

  Из книги Ubuntu 10. Краткое руководство пользователя автора Колисниченко Д. Н.

  23.2. Программный сбой Прежде всего, нужно выяснить и по возможности устранить причину сбоя. Если это сугубо программный сбой, то причины две: неправильная настройка программы (или системы) и ошибка

  Из книги Монетизация сайта. Секреты больших денег в Интернете автора Меркулов Андрей

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

  Из книги Операционная система UNIX автора Робачевский Андрей М.

  Программный интерфейс TLI При обсуждении реализации сетевой поддержки в BSD UNIX был рассмотрен программный интерфейс доступа к сетевым ресурсам, основанный на сокетах. В данном разделе описан интерфейс транспортного уровня (Transport Layer Interface, TLI), который обеспечивает

  Из книги Цифровая фотография от А до Я автора Газаров Артур Юрьевич

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

  Из книги Взрыв обучения: Девять правил эффективного виртуального класса автора Мердок Мэттью Из книги Linux и все, все, все... Статьи и колонки в LinuxFormat, 2006-2013 автора Федорчук Алексей Викторович Из книги автора

  Сделайте мне … хорошо LinuxFormat, #104 (апрель 2008)Вековечная мечта пользователей Linux – чтобы все работало «из коробки», похоже, близка к осуществлению. Что можно наблюдать на примере альфа-версии Kubuntu – 8.04. Устанавливаемая, как и раньше, сполпинка, что в варианте Desktop, что в

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

  В этом уроке, мы узнаем, как написать 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