Валидация или проверка полей формы на ошибки и заполнение.  Валидация полей произвольных форм и контейнеров на jQuery

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

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

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

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

Кроме тех типов входных данных, которые уже существовали до HTML5 (text, password, submit, reset, radio, checkbox, button, hidden), мы можем также использовать следующие смысловые HTML5 типы: email, tel, url, number, time, date, datetime, datetime-local, month, week, range, search, color .

Мы можем безопасно использовать типы входных данных в формате HTML5 со старыми браузерами, так как они будут вести себя как поле в браузерах, которые не поддерживают их.

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

1) required
Required является самым известным атрибутом в валидации HTML. У него не может быть значения. Просто теги, которые использует этот атрибут, не должны быть пустыми.

Он может быть использован в следующих инпутах: url, email, text, password, date, month, week, tel, search, select, textarea, file, checkbox, time, number . Например, пользователь может забыть ввести значение в поле ввода. В этом случае сообщение об ошибке будет высвечивается до тех пор, пока это поле не будет заполнено правильно. Поэтому важно всегда визуально обозначать для пользователя поля, обязательные для заполнения.

2) maxlength
Этот атрибут позволяет установить максимальную длину вводимого текста для текстового поля ввода. Maxlength может быть использован в следующих инпутах: textarea, password, url, tel, text и search.

В этом textarea лимит символов будет до 350.

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

3) max, min
Атрибут min и max могут помочь указывать диапазон между минимальном и максимальном номером. Мы можем использовать эти атрибуты в следующих инпутах: date, time, week, range, number и month . В следующем примере мы можем видеть минимальную и максимальную разницу в возрасте от 18 до 65 лет.

Если пользователь введет возраст до 17 лет или после 66 лет, то он получит сообщение об ошибке, при том что этот запрос не будет отправлен на сервер.

4) step
Атрибут step можно использовать для числового интервала. В следующем примере есть input number где мы указываем минимальный и максимальный год, но мы добавляем step=”4” . Это означает, что при каждом изменении значение будет меняться с шагом 4 года.

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

5) pattern
Атрибут паттерн использует регулярное выражение для валидаций этого поля. Регулярное выражение представляет собой заранее определенный набор символов, которые образуют определенный шаблон. Мы можем использовать его либо для поиска строк, которые следуют шаблону, либо для обеспечения определенного формата, определенного шаблона.

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

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

Вы также можете установить определенное требуемое значение. Вроде email или number.

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

Сообщим пользователю о требуемом формате, когда фокус находится в поле ввода

Напомним ему, если введенные данные не будут валидными

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

Проверяем заполнено поле или нет

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

Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty ,но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент не содержит в себе ничего. Поля ввода и так пусты по умолчанию.

Трюк в том, чтобы проверить поле на видимость атрибута placeholder :

CSS
input:not(:placeholder-shown) { }

Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:

:placeholder-shown супер полезен для нас! Это в целом секретный селектор, позволяющий проверить, есть ли в поле значение или нет.

IE и Firefox пока не поддерживают его, что немного осложняет задачу. Обычно спасителем является новая функция @supports , но…

CSS /* Это не сработает */
@supports (input:placeholder-shown) {
input:not(:placeholder-shown) {
}
}

Вы не можете использовать @supports для селекторов, только для свойства/значения (например @supports (display: flex)).

Проверить плейсхолдер при помощи JavaScript довольно легко:

JavaScript var i = document.createElement(‘input’);
if (‘placeholder’ in i) { }

Но это не кажется самым простым способом имитации :placeholder-shown . Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.

Представим, что поддержка уже повсеместная и посмотрим, как это будет выглядеть…

SCSS form { > div {

> input,
> input,
> input {

// Когда поле ввода…
// 1. НЕ пустое
// 2. НЕ в фокусе
// 3. НЕ валидно &:invalid:not(:focus):not(:placeholder-shown) {
// Покажем напоминание background: pink;
& + label {
opacity: 0;
}
}

// Когда в невалидное поле устанавливается фокус (и оно по прежнему не пустое) &:invalid:focus:not(:placeholder-shown) {
// Покажем более настойчивое напоминание
& ~ .requirements {
max-height: 200px;
padding: 0 30px 20px 50px;
}
}
}

// ~
// ~
//
.requirements {
padding: 0 30px 0 50px;
color: #999;
max-height: 0;
transition: 0.28s;
overflow: hidden;
color: red;
font-style: italic;

Думаю многие знают, что такое форма: это совокупность элементов, которые могут представлять собой текстовое поле (text), текстовое пространство (textarea), чек боксы (checkbox), радио кнопки/переключатели (radio), выпадающие списки (option), кнопки (button, submit). Эти поля посылают данные – имя/значение. Данные соответственно обрабатываются на сервере и результат возвращается пользователю. Валидация – это проверка данных заполненных полей на соответствие какому-то шаблону.

Проверка может осуществляться с помощью html5, javascript/jQuery на клиенте и также на сервере. Любое поле должно иметь атрибут ‘name’ Также input поля могут иметь атрибут ‘value’ . Если значение value заполнено, то оно будет отображаться на страничке по умолчанию. Input поля могут обрамляться тегами . Применение данного тега – является хорошим стилем программирования. Когда он используется то у input поля появляется заголовок при клике на который становится активным данный input или переключатель, а также можно назначать горячие клавиши. Есть два варианта использования: первый вариант связка for ссылающаяся на id нужного поля и второй вариант просто обрамить поле input: Имя либо Имя: Текстовое поле это или У полей с типом password вводимые символы отображаются звездочками для безопасности. Чтобы загрузить файл, используется поле Input с type=”file” Поле с галочкой – Input type=”checkbox”. Если поставить галочку, то такое поле получит атрибут “checked” Радио кнопка – Input type=”radio”, в отличии от чекбокса можно выбрать только одно значение. Для передачи значений, которые не нужно видеть юзеру, используются скрытые поля- Input type=”hidden”. Кнопка отправки формы – Input type=”submit”. Значение value будет отображаться на кнопке, например value=”click me!”. Просто кнопка – Input type=”button” или теги click me. Поле для большого куска текста – Здесь текст Поле выбора значения из выпадающего списка: Выбрать… Выбор 1 Выбор 2 Задать выбранное поле по умолчанию поможет атрибут selected. Если задать атрибут multiple то можно выбрать несколько значений: …

HTML 5 Input

Input type=”date” выводит календарь для выбора даты. Input type=”color” выводит палитру для выбора цвета. Input type=”range” выведет слайдер для выбора значения от 0 до 100%. Также появились новые атрибуты: autocomplete, placeholder, required, pattern и так далее… Контейнер для всех полей, это тег form. Его возможные параметры: Action – куда послать данные, Enctype – как браузеру воспринимать передаваемые данные, Method – метод передачи данных GET (через url) или POST (фоновая передача).

HTML 5 Валидация

HTML5 Валидация будет осуществляться самим браузером основываясь на типе поля. Например глянем на форму и увидим типы e-mail , url , number , datetime :

Email

Website

Age

Date & Time

send

Из плюсов это конечно автоматическая проверка, из минусов можно отметить то, что старые браузеры не поддерживают HTML5.

Если добавить атрибут required : то данное поле должно быть обязательно заполнено, иначе появится предупреждение.

Если добавить атрибут placeholder то его значение появится в поле в роли подсказки, например:

Проверить поддержку какого-то параметра браузером, можно на сайте caniuse.com

Ограничить количество вводимых символов можно свойством maxlength , например:

Параметры min/max ограничивают цифровые значения: . Также это ограничение можно присваивать датам:

Параметр multiple позволяет выбирать несколько файлов с помощью Input=”file” или делает возможным ввод нескольких емэйлов в поле Input=”email”.

Разрешить загрузку только определенных типов файлов можно указав mime-type, например только для PNG:

Или только для любых изображений:

Для mp3 и видео:

Можно также использовать регулярные выражения. Например паттерны:

Поле для ввода только слова Привет: . Если надо сделать возможность ввода Привет и привет, то меняем паттерн так: pattern=”[Пп]ривет”. И так далее. Еще примеры. Прописные буквы: + Плюс означает один или больше. Строчные и прописные +

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

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