Ketchup: расширяемый jQuery плагин для валидации форм

Ketchup — расширяемый и легконастраиваемый плагин jQuery для валидации web-форм. Плагин очень удобен в применении.  Возможна гибкая настройка интерфейса и поведения сообщений об ошибках. Так же есть возможность добавлять свои правила для валидации форм. Но в то же время в исходниках уже есть файл с описанием основных правил валидации форм. Для каждого правила есть шаблон вывода ошибки, который можно изменить(к примеру перевести на родной язык).

Скачать плагин можно здесь. Почитать о плагине можно здесь.

Для использования плагина необходим jQuery. jQuery уже есть в поставке с плагином. Так же в скаченном архиве есть примеры и инструкции по использованию плагина.

На практике

Для проверки плагина в действии подключим необходимые файлы в заголовке страницы:

Перечислю список и назначение файлов:

jquery.min.js — файл с jQuery,

jquery.ketchup.js — ядро плагина,

jquery.ketchup.messages.js — здесь хранятся информационные сообщения, выводящиеся при невалидном значении поля,

jquery.ketchup.validations.basic.js — базовые правила валидации

jquery.ketchup.css — файл стилей, описывающий вид отображения сообщения об ошибке.

Если Вы планируете использовать только стандартные правила валидации и вывод только стандартных сообщений об ошибках, то вместо трёх файлов — jquery.ketchup.js, jquery.ketchup.messages.js, jquery.ketchup.validations.basic.js можно подключить один сжатый файл 3 в 1 — jquery.ketchup.basic.min.js.

Далее в теле страницы описываем web-форму:

Для формы мы задали id=’example1′ и для каждого проверяемого поля указали правила валидации. К примеру для поля с id=’ex1_about’ мы задали validate(rangelength(10,140)) в атрибуте class. Данное правило означает, что в поле должен быть текст от 10 до 140 символов. По умолчанию плагин парсит именно атрибут class.

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

#example1 — это id формы.

Теперь при неправильном вводе данных в форму будут выводится сообщения.

Всплывающие подсказки при валидации формы плагином Ketchup

Описание базовых правил

Базовые правила описаны в файле jquery.ketchup.validations.basic.js, сообщения, выводящиеся для базовых правил описаны в файле jquery.ketchup.messages.js.

Опишем базовые правила:

required class=’validate(required)’

Поле, обязательное для заполнения

minlength(min) class=’validate(minlength(5))’

Количество символов должно быть не меньше min

maxlength(max) class=’validate(maxlength(10))’

Максимальная длина — не более max символов

rangelength(min, max) class=’validate(rangelength(5,10))’

Длина сообщения должна быть больше min, но меньше max символов.

min(min) class=’validate(min(5))’

Должно вводиться число не меньше min

max(max) class=’validate(max(10))’

Вводимое число должно быть не более max

range(min, max) class=’validate(range(5,10))’

Число должно находиться в промежутке от min до max

number class=’validate(number)’

Должно вводиться только число. Возможно вещественное(то есть возможен ввод точки).

digits class=’validate(digits)’

Вводимые данные должны состоять только из цифр. При этом ввод вещественного числа с точкой — невалидное значение.

email class=’validate(email)’

Должен вводиться E-mail адрес

url class=’validate(url)’

Должен вводиться url-адрес

username class=’validate(username)’

Должно вводиться имя юзера. Шаблон a-z0-9_-

match(selector) class=’validate(match(#password))’

Вводимое значение должно совпадать со значением, введённым в элементе, который можно найди посредством селектора #password

date class=’validate(date)’

Только дата.

minselect(min) class=’validate(minselect(2))’

Минимальное число выбранных checkbox-элементов. Class указывается у любого checkbox из группы. Только один раз.

maxselect(max) class=’validate(maxselect(6))’

Максимальное число выбранных checkbox-элементов. Class указывается у любого checkbox из группы. Только один раз.

rangeslect(min, max) class=’validate(rangeselect(2,6))’

Можно выбрать от min до max checkbox-элементов. Class указывается у любого checkbox из группы. Только один раз.

Настройка под себя

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

При такой активации плагин будет искать элементы с атрибутом rel.

При возникновении ошибки плагин создаёт в дереве DOM блок <div class=’ketchup-error-container’> со списком <ol> внутри. Для того, чтобы плагин создавал другой элемент, активируем плагин следующим образом

После этого будет создаваться блок с классом ketchup-error-container-alt. Внутрь тега ol вставлять ничего не нужно, туда будет вставляться сообщение об ошибке.

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

Внутри функции initialPositionContainer будет доступен errorContainer — блок с ошибкой и field — проверяемый элемент формы. Можно спозиционировать блок с ошибкой относительно проверяемого поля. К примеру в плагине по умолчанию написано следующее:

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

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

В функции positionContainer можно задать последующее позиционирование блока. Например по умолчанию в плагине записано следующее поведение:

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

Можно задать поведение при показе и скрытии блока с ошибкой. Для этого:

В функциях showContainer,  hideContainer доступен блок с ошибкой — errorContainer.

Для создаваемого блока с ошибкой можно задать своё стилевое оформление. Для этого в файле jquery.ketchup.css заменим всё на это:

Можно добавить своё правило валидации.

К примеру без параметра. Допишем в файле jquery.ketchup.validations.basic.js для валидации вот что:

Return true — валидация прошла успешно, иначе нет.

В файле jquery.ketchup.messages.js для задания текста сообщения допишем вот что:

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

Для поля с id=ex3_tomato будет проводиться проверка, и если введено не ‘tomato’, то будет выводиться сообщение.

Приведём пример валидации с параметром.

Допишем в файле jquery.ketchup.validations.basic.js для валидации вот что:

В файле jquery.ketchup.messages.js для задания текста сообщения допишем вот что:

Ну и форма:

При проверке данной формы если поле с id=ex3_yesno не равно yes или no, то будет выводиться сообщение об ошибке.

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

Итоги

Плагин очень хорош.  Но есть одно но. При изучении оказалось, что он не работает в нашем ‘любимом’ IE6, да и как говорят в последующих версиях, если не установить правильный DOCTYPE работает некорректно. Но автор плагина писал, что исправит всё к следующему релизу. В остальных браузерах работает корректно(тестировал в Firefox 3 и Opera 9.6, ну и Internet Explorer 6).

О багах и вообще о плагине можно почитать на github и на сайте плагина(ссылки приведены выше).

Пока что в поиске другого валидатора форм 🙂

Рубрики: jQuery
Теги: jQuery, Ketchup
Понравилось? Поделись с другими плз












Комментарии ВКонтакте





Комментарии с сайта
  1. Павел:

    <div>
    <label for="ex1_roles">Speciality</label>
    <input type="checkbox" name="role" value="jquery" /> jQuery
    <input type="checkbox" name="role" value="js" /> JavaScript
    <input type="checkbox" name="role" value="rails" /> Rails
    <input type="checkbox" name="role" value="php" /> PHP
    <input type="checkbox" name="role" value="wp" /> WordPress
    <input type="checkbox" name="role" value="other" class="validate(rangeselect(1,3))" /> Other
    </div>

    что будет передаваться на сервер, если выбрано несколько checkbox?

  2. Сергей:

    У меня на форме есть поля, которые отображаются или нет в зависимости от выбора других данных. Или даже создаются в процессе заполнения (например, контактные телефоны, которых может быть несколько). Как навязать кетчуп на динамически создаваемые объекты, которые могут и исчезнуть? Как навязать кетчуп на объекты, которые могут быть то обязательны, то нет, в зависимости от выбора других данных (например сведения воинского учета — для мальчиков по любому, для девочек по желанию)

    • с помощью Ketchup такого сделать нельзя, по крайней мере на сайте автором(коим я НЕ являюсь) это не описано. Могу посоветовать фреймворк для веб-форм http://zforms.ru/. Правда он сложен в освоении, куча настроек, но на сайте всё описано и есть примеры. Там можно настраивать валидацию, обязательность, необязательность, скрытие/показ элементов формы в зависимости от введённых данных в других в элементах формы. Но насчёт динамически создаваемых элементов форм я точно сказать не могу, может это делать ZForms или нет.

  3. Сергей:

    з.ы. Также испытывал траблы с использованием кетчупа под IE всех версий. Погуглив как следует на буржуйском сайте нашел таблетку:
    В функцию extractValidations перед циклом for вставить строчку
    valStr = valStr.split("");

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

    з.з.з.ы Если кому интересно, в течении недели могу дать ссылку на свою модификацию.


Ответить Павел

*