tFormer.js — empower your HTML forms

Предисловие:

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

Проблема:

Основными проблемами собственных скриптов и плагинов всегда были — гибкость, удобство и простота.
Большое количество data-attributes, необходимых для конфигурации скриптов (как это в Parsley.js) делают и код менее читабельным, и никогда не помнишь, как все они пишутся. Не просто…
Не все плагины хорошо подходили под желаемые HTML-формы, а постоянно писать свои скрипты под разные формы не всегда удобно и разумно.

Задача:

Создать нечто гибкое, удобно настраиваемое, полностью подконтрольное, с интуитивным синтаксисом и чтоб валидировало.

Решение:

Решение вылилось в небольшой опенсорсный плагин, который получил название tFormer.js.

Основные возможности и особенности:

• Независимость — не нуждается в jQuery (редкость в наше время);
• Большой список валидационных правил;
• Все валидационные правила короткие и интуитивные — легко запомнить и использовать;
• Комбинирование и установка правил всего через один data-attribute или через опции при инициализации нового объекта tFormer;
• Отдельный объект, который производит саму валидацию значений, может быть использован вне основного плагина или для дополнительных сложных валидаций;
• «Кастомная» функция валидации own() — может быть написана разработчиком для сложных валидаций конкретного поля;
• Изменение правил и настроек валидатора «на лету» (методы setRules() и set());
• Контроль сабмит события и визуальный контроль сабмит кнопки;
• Кнопки для проверки валидации (check buttons);
• Изменяемое валидационное событие (по умолчанию событием для валидации есть «input» и «keyup»);
• Задержки валидации по таймаутам;
• Процесcинг состояния;
• Возможность выставлять опции как для всех полей так и уникальные для каждого поля;
• onerror и onvalid функции которые срабатывают после валидации;
• before функция выполняется каждый раз перед валидацией;
• Валидация по AJAX без строгого регламента для AJAX ответа (в функции end(result) разработчик должен сам вернуть true или false, обработав ответ);
• Модификация error, processing и disabled классов;
• … и прочее.

Установка и использование:

1. Скачать;
2. Подключить скрипт на желаемой странице;
3. Определить новый объект tFormer с желаемыми опциями.

Пример HTML формы:

<form id="my_form_id">      <input type="text" name="zip" data-rules="a1 l=5" />      <input type="text" name="email" data-rules="* @" />      <input type="submit" value="Submit" /> </form> 

Пример минимального определения tFormer:

var my_form_id = new tFormer('my_form_id'); 

Пример определения tFormer c указанием модификаций:

var my_form_id = new tFormer('my_form_id', {      errorClass: 'my_own_errorClass', // новый класс для полей, которые не проходят валидацию      timeout: 666, // валидационный таймаут      disabledClass: 'i_am_disabled',      onerror: function(){  // обработчик ошибок валидации           console.log('The field with name `' + this.name + '` is not valid');      },      // другие опции ….       fields: { // опции который относятся к конкретным полям           email: {                timeout: 500 // таймаут валидации для поля email           }      } }); 

Краткая таблица валидационных правил:

Куски кода:

Пример изменения опций и правил валидации:

my_form_id.set({timeout: 555}); // новый таймаут для валидации my_form_id.setRules(' ', 'email'); // теперь поле всегда валидно - нет правил 

Отдельный объект для валидации (используется основным плагином и может быть использован отдельно от него):

_v_('some value').validateWithRules('* l>5'); // => true 

Кастомная функция валидации полей сложного типа (создается девелопером по необходимости)::

var my_form = tFormer('my_form_id', {     fields: {         field_name: {             own: function(){                 var my_value = this.value;                 var is_ip = _v_(my_value).validateWithRules('* ip');                 var is_email = _v_(my_value).validateWithRules('* @');                 var is_url = _v_(my_value).validateWithRules('* url');                 return (is_ip || is_email || is_url);             }         }     } }); 

Методы для контроля состояния формы:

// активировать / деактивировать сабмит кнопку my_form.submitButtonControl( true ); // алиас - submitButtonOn() my_form.submitButtonControl( false ); // алиас - submitButtonOff()  // включение / выключени процессинг состояния у сабмит кнопки my_form.processing( true ); // алиас - processingOn() my_form.processing( false ); // алиас - processingOff()  // блокировка и разблокировка сабмит кнопки формы my_form.lock(); my_form.unlock(); // что разблокировать форму надо вызвать unlock() столько раз сколько был вызван lock() 

Статус плагина:

Плагин перешагнул версию 0.3 и сейчас в бете.
Работает в новых версиях браузеров и даже в IE8 (пришлось заморочиться).
Лежит на гитхабе, делается по мере возможности и времени, ждет дополнительных идей и коммитов со стороны всех заинтересовавшихся разработчиков 🙂

Линки

• Основная (полная) документация — http://tFormerjs.com
• Github репозиторий — https://github.com/TjRus/tFormer.js