lemongrab: плагін валідації веб-форм

  Добрий день.
У цьому топіку я розповім про зручному jQuery-плагін для валідації веб-форм, простому і потужному, при тому — абсолютно ненадлишкових. Якщо вам не цікаві подробиці створення і порівняння з аналогами (точніше — з аналогом), дивіться кінець топіка, там посилання на приклади і вихідний код.
 
Деякий час тому мені довелося допрацьовувати клієнт-сайд ресурсу, що включає просто неймовірна кількість анкетних форм. Однією з неприємних особливостей цих форм було моторошне кількість різнотипних правил валідації введення і ще більша кількість взаємозв'язків між полями.
Приклад: якщо обраний чекбокс А, то в поле Х можна ввести тільки цифри, а поле Y має бути приховане, але якщо додатково обрана радіокнопка Z, то поле Y потрібно показати, а в поле X можна ввести все, крім цифр.
Іншими словами — суще пекло, народжений нездоровим свідомістю маркетологів.
 
 
 
Незважаючи на те, що існує чимала кількість способів валідації вмісту полів введення (аж до стандартних браузерних… тільки, на жаль, не кросбраузерності), існувало тільки одне відповідне клієнтське рішення, що дозволяло встановлювати складні зв'язку між декількома полями — фреймворк ZForms , який спочатку і використовувався на ресурсі. Мабуть, на тому, що він це вмів, його плюси і закінчувалися, потім починалися суцільні мінуси:
 - Неочевидний і незручний спосіб завдання правил валідації в обробнику onclick (!). Існує ще недокументований спосіб завдання цих правил через XML-подібні вставки безпосередньо в код сторінки, але це ще більший жах.
 - Фреймворк модифікує DOM-дерево, при цьому вимагаючи особливих умов до його структурі. Наприклад, змінюване при валідації властивість застосовується не до поля, а… до його предку другого (!!) Порядку, що потрібно було враховувати при верстці.
 - Валідіруемие контроли, по суті, підміняються віджетами фреймворка, навіть там, де це не потрібно. У більшості випадків це означає неможливість використання будь-яких інших засобів роботи з полем. Не описати словами, скільки зла я згенерував, схрещуючи ZForms з jQuery UI…
 - Огидна подієва модель роботи. ZForms працює тільки з подіями власних віджетів, і підписатися можна також тільки на них. Доходило аж до того, що доводилося вішати перевірку валідності на таймер.
 - Купа багів (вилазять, як зазвичай, вже на продакшені), виправляти які доводилося влізаючи в мінімізований код фреймворка, або костиліруя цей код своїм.
 
І, зрештою, остання версія ZForms вийшла аж в 2009 році, і його jQuery-версія зовсім не хотіла працювати з останніми версіями бібліотеки.
Загалом, тут був явно той випадок, коли було потрібно закатати рукава і вирішити завдання з нуля. Це я і зробив, написавши jquery.lemongrab.
 
Основні ідеї lemongrab такі:
 - Плагін не намагається бути чимось, чим він не є. Він робить одне завдання, але робить це добре.
 - Плагін використовує можливості HTML5, при цьому залишаючи можливість роботи на старих браузерах.
 - Валідація задається максимально зручно для конкретного випадку.
 - Плагін не конфліктує з іншими обработчиками.
 
Робота плагіна тестувалася на всіх сучасних і не дуже браузерах, як десктопних, так і мобільних. У підсумку, все залежить від використовуваної версії jQuery — проблеми (втім, легко вирішені) виникли тільки на IE молодше 9 версії.
 
 Що lemongrab може?
 - Плагін вміє перевіряти стан будь-яких полів введення, і залежно від заданих правил, міняти стану елементів (цих же, або будь-яких інших). Змінні стану: валідність, обов'язковість, доступність, видимість.
Якщо з доступністю і видимістю все зрозуміло (це, відповідно, атрибут enabled і css-властивість display), то про валідність і обов'язковість варто пояснити. І те й інше підглянуть в тому ж ZForms; по суті ці атрибути — просто класи, додаються до поля у випадку, якщо воно валідності / невалідний і у випадку, якщо воно обов'язково має бути заповнено (в цьому випадку ще додається HTML5-атрибут required). Плагін не дасть сабміта форму, в якій є поля з такими атрибутами (хоча і це настроюється).
 - У плагіна проста і очевидна подієва модель. Сталася подія, скажімо, якийсь елемент став валиден, — для нього згенерувати подія lemongrab.valid. Перестав бути валиден — згенерувати lemongrab.novalid.
 - Правила задаються в JSON, який може бути прописаний як безпосередньо в data-атрибуті валідіруемого елемента, так і завантажений при ініціалізації плагіна. Перше зручно завданні правил безпосередньо в коді сторінки, останнє — при виносі правил в окремий файл (ZForms, до речі, так не вміє).
 - Для валідації можуть використовуватися прості властивості (наприклад checked / unchecked для checkbox), регулярні вирази, стану наборів полів, і навіть jQuery-селектори. У разі, якщо і цього не вистачає, для перевірки стану можна використовувати для користувача функцію.
 - Кількість правил для елемента необмежена, і комбінуватися вони можуть як завгодно. Плагіну можна задати логіку суміщення правил (і / або / ні), для більш складних варіантів є всі ті ж функції користувача.
 - У плагіні купа всяких маленьких додаткових плюшечек, описаних в документації.
 
Як це виглядає?
Парочка наочних прикладів:
 
Поле буде валідність (йому додасться клас ACCEPTABLE), у разі відповідності його вмісту регекспу:
 
 
<form id="sample">
	<input type="text" data-rule-valid='[{"key":"regexp","value":"^.{1,5}$"}]' /></code>
	<script>$("#sample").lemongrab();</script>
</form>

 
Поле # id2 буде доступно для введення, якщо вибрано другу радіокнопка:
 
 
<form id="sample">
<fieldset id="selectbox">
	<input type="radio" name="test" value="1" id="1" />
	<input type="radio" name="test" value="2" id="2" />
	<input type="radio" name="test" value="3" id="3" />
	<input type="radio" name="test" value="4" id="4" />
</fieldset>
<input type="text" data-rule-enabled='[{"key":"c", "selector":"#3"}]' />
<script>$("#sample1").lemongrab();</script>
</form>

 
 Документація та інтерактивні приклади .
 
З тих пір, як я написав цю штуку, життя моє стало прельстіва і любовна, чого і вам бажаю, а тому викладаю код у відкритий доступ: репозиторій на github .
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.