О том, как с помощью A/B-тестирования выясняем, какая реклама работает лучше всего. В процессе выбора лучшей площадки для проведения экспериментов, мы протестировали и составили подборку сервисов для проведения тестирования. С полезными комментариями. И делимся с вами!

Какой функционал был для нас важен?

  • Возможность бесплатно потестить сервис в полную силу. То есть на реальной рекламной кампании с большими потоками посетителей.
  • Возможность подгрузки своего варианта страницы. Это означает, что мы хотим создать свою красивую страничку и загрузить ее в сервис, там же сделать изменения в онлайн-редакторе и запустить тест.
  • Удобный и неглючный онлайн-редактор страниц.
  • Правильное подцепление целей тестирования. Несложные цели можно настраивать прямо в сервисах. Собственно, по ним и по промежуточным целям можно сравнивать конверсии вариантов и выбирать выигрышный.
Как разобраться в подборке?
  • Сервис — адрес сервиса, тут все просто.
  • A/ B или MVT — какой из вариантов тестирования поддерживает сервис.
  • A/ B-тестирование — это когда варианты тестируемой страницы отличаются одной переменной(разная кнопка, разный заголовок и т.д.). . Например, в одном варианте кнопка «Заказать» красная, в другом — зеленая. А в целом страницы идентичны.
  • MVT — это многовариантное тестирование. Когда варианты тестируемой страницы отличаются в множестве разных вещей. Первый вариант синего цвета, с красной кнопкой «Заказать» и рисунком из бабочек в шапке страницы. Второй вариант — фиолетовый, с зеленой кнопкой «Заказать» и рисунком из единорогов. Третий вариант — вообще черно-белый, с мигающей кнопкой «Заказать» и фотографией заказчика на заднем фоне.

    • Некоторые сервисы лэндингов поддерживают функцию только A/ B-тестирования, некоторые и A/ B, и MVT.

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

    • В разные тарифы входят разные параметры, тут уж какой сервис на что горазд.

    • Шаблоны\онлайн-редактор - Где-то есть готовые шаблоны, где-то есть редактор, с помощью которого можно изменять переменные.
    • Демоверсия — сколько дней можно пользоваться этим сервисом бесплатно.
    • Комментарии — наши личные замечания о работе каждого сервиса.
    Подборка сервисов для A/B-тестирования Русскоязычные сервисы Сервис #1
    • Сервис: http://abtest.ru/
    • Поддержка тестирования: А/B
    • Тарифные планы: тестирование бесплатно, сервис умирает и находится в бета-версии.
    • Шаблоны\ редактор: онлайн-редактор.
    • Комментарии: Разрешает подгружать свои лэндинги. Ужасно глючный редактор.
    Сервис #2
  • $37 , 3500 посетителей, 2 домена, 25 страниц.
  • $58 , 9000 посетителей, 5 доменов, 50 страниц.
  • $119 , трафик, кол-во доменов и кол-во страниц не ограничено, подключение собственных доменов.
  • $440 , трафик, количество доменов и страниц не ограничено, подключение собственных доменов, 15 клиентских аккаунтов, персональный брендинг.
    • Шаблоны\редактор: шаблоны и онлайн-редактор.
    • Демоверсия: 14 дней.
    • Комментарии: Есть свой набор шаблонов и платных и бесплатных. Не нашлось инструмента загрузки собственных сайтов для изменения в редакторе. Редактор простой, но требует время для изучения.
    Англоязычные сервисы Сервис #3
    • Сервис: http://unbounce.com/
    • Поддержка тестирования: A/B.
    • Тарифные планы:
  • $49 — 5 000 посетителей.
  • $99 — 25 000 посетителей.
  • $199 — 200 000 посетителей

    • На всех планах: неограниченное количество тестов и страниц во всех планах, статистика, онлайн-конструктор страниц.

    • Шаблоны\редактор: шаблоны и онлайн-конструктор(!).
    • Демоверсия: 30 дней.
    • Комментарии: Редактор довольно удобный и приятный в использовании. Не нашли, как загрузить свою страницу для изменения. Шаблоны страниц тусклые и неинтересные. В сервисе есть не просто онлайн-редактор блоков, а полноценный онлайн-конструктр, с помощью которого можно создать простой сайт с нуля.
    Сервис #4


    • Сервис: https://vwo.com/
    • Поддержка тестирован ия: A/B, MVT и тестирование мобильных приложений.
    • Тарифные планы:
  • $49 , 10 000 посетителей.
  • $129 , 30 000 посетителей.
  • Индивидуальный тарифный план — около миллиона посетителей в месяц, тестирование на мобильных, связанные аккаунты, личный консультант.
    • Шаблоны\ редактор: онлайн-редактор.
    • Демоверсия: 14 дней.
    • Комментарии: у сервиса красивый интерфейс, но при подгрузке своей страницы возникают проблемы.
    Сервис #5
    • Сервис: http://www.convert.com/ .
    • Поддержка тестирования: A/B & MVT
    • Тарифные планы:
  • $9 , 2000 посетителей.
  • $29 , 10 000 посетителей, MVT.
  • $59 , 30 000 посетителей, MVT.
  • $99 , 50 000 посетителей, MVT + тестирование мобильных сайтов.
  • $139-$1499 , тарифные планы для агентств. Безлимитное количество проектов и тестов, онлайн-поддержка, интеграция с Google-Analytics.
    • Шаблоны\ редактор: онлайн-редактор.
    • Демоверсия: 15 дней.
    • Комментарии: Удобный редактор своих страниц. Шаблонов нет. Все красиво, сочно и удобно, но периодически перестает считать цели, выявлялись ошибки/косяки сервиса, исправлялись техподдержкой, но на следующий день подцепление целей опять слетало по неизвестной причине.
    Сервис #6
    • Сервис: http://www.clickthroo.com/
    • Поддержка тестирования: A/B.
    • Тарифные планы:
  • $195 , 50 000 посетителей, 5 проектов.
  • $395 , 100 000 посетителей, 10 проектов.
  • $695 , 100 000 посетителей, безлимитное количество проектов.
  • $1195 , 250 000 посетителей, безлимитное количество проектов.
    • Шаблоны\ редактор: шаблоны и онлайн-редактор.
    • Демо-версия: 14 дней демодоступа.
    • Комментарии: Делаешь запрос на демодоступ, заполняя огромную форму и не получаешь его. Ок, получаешь, но через пару рабочих дней.
    Сервис #7


    $1295 — до 10 000 посетителей в месяц. Неограниченное количество проектов, страниц, тестов, доменов, техподдержка.

  • Шаблоны\ редактор: шаблоны и онлайн-редактор.
  • Демоверсия: бесплатный демодоступ.

    • «Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.

    Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

  • Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.
  • На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.
  • Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

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

    Обязательное поле

    Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required , как показано в примере 1.

    Пример 1. Атрибут required

    HTML5 IE 10+ Cr Op Sa Fx

    Обязательное поле

    Логин:

    Пароль:

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

    Рис. 1. Обязательное поле не заполнено

    Корректность данных

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

    • Веб-адрес ( ) должен содержать протокол (http://, https://, ftp://).
    • Адрес электронной почты ( ) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

    У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

    В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.

    Пример 2. Корректность данных

    HTML5 IE 10+ Cr Op Sa Fx

    Корректность данных

    Заполните форму (все поля обязательны)

    Имя:

    Email:

    Сайт:

    Opera проверяет элемент формы только при наличии атрибута name.

    Что происходит в Opera при вводе неверных данных показано на рис. 2.

    Рис. 2. Предупреждение о неправильных данных

    Шаблон ввода

    Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern , а его значением выступает регулярное выражение . Некоторые типовые значения перечислены в табл. 1.

    В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

    Пример 3. Шаблон ввода

    HTML5 IE 10+ Cr Op Sa Fx

    Ввод цвета

    Введите шестнадцатеричное значение цвета (должно начинаться с #)

    На рис. 3 показано предупреждение в браузере Chrome.

    Рис. 3. Введённые данные не соответствуют шаблону

    Отмена валидации

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

    Пример 4. Отмена валидации

    HTML5 IE 10+ Cr Op Sa Fx

    Атрибут novalidate

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

    Вам когда-нибудь приходилось искать скрипты и плагины для валидации произвольных форм и контейнеров? Когда тэг "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, который можно применять для валидации произвольных форм как на лету, так и в ручном режиме. При этом, плагин легко расширяется как с точки зрения количества проверок, так и с точки зрения дополнительной функциональности.

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

    Принципы

    Задача дизайнера - сделать так, чтобы пользователь не совершил ошибку и валидация не понадобилась, для этого:

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

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

    Виды валидации

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

    Чем раньше интерфейс сообщает об ошибке, тем лучше - пользователю проще вернуться и исправить ошибку.

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

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

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

    Валидация срабатывает сразу после потери фокуса, если значение в поле заполнено. Если найдена ошибка, поле подсвечивается красным. Фокус в это поле автоматически не возвращается:

    Текст ошибки появляется в тултипе, когда поле получает наведение или фокус:

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

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

    Валидация при отправке формы Когда использовать

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

    Как работает

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

    При прокрутке к первому полю от верхней границы окна до ошибочного поля остается отступ 50 px.

    Блокирование кнопки отправки

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

    Как только заполнены все обязательные поля - кнопка становится активной. Если после этого пользователь стер значение в одном из полей - кнопка снова должна стать не активной.

    Сообщения об ошибках

    Об ошибках можно сообщать двумя способами:

    Тултипы Как работают

    Тултип с подсказкой появляется в двух случаях:

  • При наведении на поле с ошибкой.
  • Когда поле с ошибкой получает фокус.

    • Тултип по наведению перекрывает тултип по фокусу.


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


    Единообразие поведения и внешнего вида

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

    Красные тексты на странице Как работают

    Красный текст ошибки появляется сразу, как только произошла ошибка и поле подсветилось, и пропадает, как только исчезает подсветка поля.

    Выводите текст ошибки справа, если на форме есть место, а само сообщение короткое. Так форму не придется раздвигать, чтобы показать ошибку.

    Если справа от поля нет места для текста, раздвигайте форму и выводите сообщение под полем.


    На более сложных формах выводите сообщение об ошибке в тултипе.

    Валидация зависимых полей

    Зависимые поля - это поля, значение которых зависит друг от друга.

    Ошибки, которые связаны с нарушением зависимости полей, мы показываем после сабмита формы. Например, ИНН и КПП. Если пользователь указал ИНН из 10 цифр, а поле с КПП оставил пустым, после отправки формы пустое поле с КПП будет подсвечено.

    ИНН может быть двух видов:

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

    Подсветка зависимых полей пропадает, как только пользователь начал исправлять значение в одном из этих полей.

    Если при заполнении зависимого поля нарушен формат значения, сообщайте о такой ошибке при потере фокуса. Например, пользователь ввел 3 цифры в поле ИНН и убрал фокус. Такое поле должно подсветиться сразу же.

    Пример

    Есть форма из 5 полей:

    • Название организации - простое текстовое, обязательное
    • ИНН - 10 или 12 цифр, проверка контрольной суммы по потере фокуса, обязательное
    • КПП - 9 цифр с проверкой контрольной суммы по потере фокуса, обязательное, если ИНН состоит из 10 цифр
    • Электронная почта - адрес почты, проверка по потере фокуса по маске [email protected], необязательное
    • Телефон - международный формат, проверка по потере фокуса по маске +00000000000, обязательное