главная

Теги:


Плагин для проверки значений полей формы

Что делает плагин Ketchup?

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

Вам не нравятся стили по умолчанию? Измените их! Нужно использовать другую разметку? Редактируйте ее! Правила проверки не подходят для ваших нужд? Напишите свои! Сделать собственный кетчуп для своего проекта очень просто.
Плагин Ketchup может работать прямо "из коробки".

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

Установка

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






Если вы планируете использовать только базовые правила проверки и сообщения по умолчанию (в исходниках они переведены на русский язык), то можете включить один файл с минимизированным пакетом Ketchup вместо трех скриптов:




Пример разметки

Теперь, очевидно, нам нужна форма для проверки. Это первая форма для примера использования плагина:

jQuery

JavaScript

Rails

PHP

Wordpress

Другая

Добавляем правила проверки в разметку

По умолчанию плагин Ketchup просматривает в атрибуте class полей input, textarea и select наличие функции validate(). Смотрите в примере:

class="validate(required, username)" />
class="validate(required)" />
class="validate(required, match(#ex1_password))" />

jQuery

JavaScript

Rails

PHP

Wordpress

class="validate(rangeselect(1,3))" /> Другая

Активируем Ketchup

Последний шаг. Нужно активировать плагин Ketchup с установками по умолчанию для формы:

$(document).ready(function() {
  $('#example1').ketchup();
});

Проверки, доступные по умолчанию

Плагин Ketchup по умолчанию имеет основные правила проверки (смотри файл jquery.ketchup.validations.basic.js ) и соответствующие им сообщения (смотри в файле jquery.ketchup.messages.js):
required

validate(required)- требуется ввести значение в поле.
minlength(min)

validate(minlength(5)) - значение должно быть длиной более min.
maxlength(max)

validate(maxlength(10))- значение должно быть длиной меньше max.
rangelength(min, max)

validate(rangelength(5,10)) - значение должно быть длиной в диапазоне от min до max.
min(min)

validate(min(5)) - значение должно быть больше min.
max(max)

validate(max(10)) - значение должно быть меньше max.
range(min, max)

validate(range(5,10)) - значение должно быть в диапазоне от min до max.
number

validate(number) - значение должно быть числом
digits

validate(digits) - значение должно быть цифрой.
email

validate(email) - значение должно быть правильным адресом e-mail.
url

validate(url) - значение должно быть правильным URL.
username

validate(username) - значение должно быть правильным именем пользователя (a-z0-9_-).
match(selector)

validate(match(#password)) - значение должно соответствовать значению поля, которое можно найти с помощью селектора selector.
date

validate(date) - значение должно быть правильной датой.
minselect(min)

validate(minselect(2)) - должно быть отмечено более min чекбоксов с одинаковым именем. Назначайте данное правило только одному чекбоксу в группе.
maxselect(max)

validate(maxselect(6)) - не допускается отмечать более max чекбоксов с одним именем. Назначайте данное правило только одному чекбоксу в группе.
rangeslect(min, max)

validate(rangeselect(2,6)) - должны быть отмечено не более max и не менее min чекбоксов с одним именем. Назначайте данное правило только одному чекбоксу в группе.
Комбинирование правил проверки

Вы можете комбинировать правила проверки следующим образом:

Установка стилей и поведения контейнера для сообщений об ошибках.

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

Альтернативный атрибут для функции validate()

Обратите внимание, что функция validate() размещается в атрибуте rel, а не в атрибуте class. Чтобы сообщить плагину Ketchup, где искать функцию validate(), надо использовать параметр validationAttribute:

$('#example2').ketchup({
  validationAttribute: 'rel'
});

 

Индивидуальная разметка контейнера для сообщений об ошибках

Плагин Ketchup не предоставляет для вас ни какой разметки. Используйте свой собственный контейнер или код HTML в строке или построителе элементов, как показано в примере, передав его через параметр errorContainer:

Важно
: Ваш контейнер для сообщений об ошибках должен содержать пустой нумерованный список (

). Сообщения об ошибках будут вставляться в него.

$('#example2').ketchup({
  validationAttribute: 'rel',
  errorContainer: $('
', { 'class': 'ketchup-error-container-alt', html: '
    ' }) });

     

    Установка начальной позиции для контейнера сообщений об ошибках

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

    $('#example2').ketchup({
      validationAttribute: 'rel',
      errorContainer: $('
    ', { 'class': 'ketchup-error-container-alt', html: '
      ' }), initialPositionContainer: function(errorContainer, field) { //errorContainer = контейнер для сообщений об ошибках со всеми наследниками //field = поле, которое нужно проверить } });

      Изменение позиции контейнера сообщений об ошибках

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

      $('#example2').ketchup({
        validationAttribute: 'rel',
        errorContainer: $('
      ', { 'class': 'ketchup-error-container-alt', html: '
        ' }), initialPositionContainer: function(errorContainer, field) { //errorContainer = контейнер для сообщений об ошибках со всеми наследниками //field = поле, которое нужно проверить }, positionContainer: function(errorContainer, field) {} });

        Выводим и скрываем контейнер сообщений об ошибках

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

        $('#example2').ketchup({
          validationAttribute: 'rel',
          errorContainer: $('
        ', { 'class': 'ketchup-error-container-alt', html: '
          ' }), initialPositionContainer: function(errorContainer, field) { //errorContainer = контейнер для сообщений об ошибках со всеми наследниками //field = поле, которое нужно проверить }, positionContainer: function(errorContainer, field) {}, showContainer: function(errorContainer) { errorContainer.slideDown('fast'); }, hideContainer: function(errorContainer) { errorContainer.slideUp('fast'); } });

          Задаем стиль для контейнера сообщений об ошибках

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

          .ketchup-error-container-alt { margin: 10px; width: 510px; display: none; }
          .ketchup-error-container-alt li {
            background: #F04D5B;
            color: black;
            padding: 3px 10px 3px 10px;
            font-size: 11px;
            margin-bottom: 3px;
            boder-radius: 20px;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
          }
          

          Нужно организовать другую проверку? Сделайте свой кетчуп!

          Если правил проверки по умолчанию Вам не достаточно, то можно легко расширить функционал плагина Ketchup.
          Без аргументов

          Создадим проверку, которая не требует никаких аргументов и просто сопоставляет значение со словом "помидор".
          Без аргументов - форма примера

          Без аргументов - устанавливаем сообщение об ошибке

          Сначала нужно установить сообщение об ошибке, которое будет выводиться в случае, если проверка не будет пройдена. Можно либо добавить его в файл jquery.ketchup.messages.js или установить в собственном скрипте:

          $.fn.ketchup.messages = {
            'помидор': 'Нужен помидор!'
          }

          Без аргументов - функция проверки

          Затем расширим функционал плагина Ketchup нашей функцией проверки, которая будет просто сравнивать ввод со словом 'помидор'. Функция проверки должна возвращать либо true, либо false. Первые два аргумента в функции должны быть элементами field и value. Вы можете использовать данные объекты в вашей функции:

          $.fn.ketchup.validation('помидор', function(element, value) {
            if(value == 'помидор') return true;
            else return false;
          });
          
          

          Без аргументов - активируем плагин

          Осталось только активировать плагин обычным способом:

          $.fn.ketchup.validation('помидор', function(element, value) {
            if(value == 'помидор') return true;
            else return false;
          });
          
          

          С аргументами

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

          С аргументами - устанавливаем сообщение об ошибке

          Вы можете форматировать сообщение с помощью аргументов ($arg1, $arg2, $arg3...), которые передаются в функцию проверки. В нашем примере мы будем проверять значение поля на соответствие двум словам:

          $.fn.ketchup.messages = {
            'либо': 'Должно быть либо $arg1, либо $arg2.'
          }
                
          

          С аргументами - функция проверки

          Вы помните, что первые два аргумента в функции проверки должны быть field и value? Все остальные аргументы находятся в вашем распоряжении. Мы хотим проверять два слова, два аргумента:

          $.fn.ketchup.validation('либо', function(element, value, word1, word2) {
            var valueL = value.toLowerCase();
          
            if(valueL == word1.toLowerCase() || valueL == word2.toLowerCase()) return true;
            else return false;
          });  
          

          С аргументами - активируем плагин

          Активируем плагин для формы:

          $(document).ready(function() {
            $('#example4').ketchup();
          });
                

          Источник урока: demos.usejquery.com/ketchup-plugin/validation.html

           

          Урок Создан:2011-02-09 Просмотров:2493

          Добавить комментарий:

          
          Copyright© 2009 Hosted by Zhost