H PrettyForms - проста клієнт-серверна валідація форм З пісочниці
.collapse">Зміст
Думаю, для багатьох з нас фраза «валідація форм» є синонімом купи додаткового коду перевірки в контролерах, тривалого налаштування всіляких плагінів валідації, і так далі. Так, сучасний світ пропонує безліч різних рішень цієї проблеми, як на клієнтській стороні, так і на серверній. Але якщо чесно, говорячи про клієнтську валідацію… якісь усі ці бібліотеки надто громіздкі та неповороткі, настільки, що в мене щоразу відбивало бажання підключати їх до своїх проектів. Та й на стороні сервера хотілося б сховати перевірку введених даних кудись у бік від основної логіки роботи програми.
Тому я і вирішив зрештою зібрати весь код, який я писав у проектах, і скомпонувати його в одну невелику бібліотеку під назвою PrettyForms. Бібліотека ця містить зовсім небагато коду, але при цьому своє завдання вона вже зараз непогано вирішує.
Приклад роботи:
Найпростіший варіант
Щоб вона просто почала працювати, необхідно лише підключити її до сторінки, а потім додати для всіх полів, для яких необхідна валідація, атрибут "data-validation", що містить правила валідації, описані у wiki бібліотеки в розділі "Валідатори полів".
Всі. Більше нічого робити не треба, все інше бібліотека зробить за вас :) До цього я і прагнув спочатку: якнайменше рухів тіла.
Це найпростіший варіант, без урахування серверної валідації даних. Якщо ж у вас виникло бажання використати всі можливостіPrettyForms, тоді вам слід вивчити алгоритм роботи та протокол спілкування клієнтської машини з сервером, завдяки якому вона і стає такою зручною у використанні.
Варіант із клієнт-серверною валідацією
Алгоритм роботи:
- Користувач заповнює поля та натискає кнопку відправлення форми. Бібліотека проводить валідацію всіх даних, і якщо все нормально, вона збирає всі дані форми, відправляє POST-запит на сервер і чекає від нього JSON-відповідь у спеціальному форматі.
- Сервер, отримавши запит, проводить додаткову валідацію даних на своєму боці. Якщо виникли помилки при серверній валідації, він повертає клієнту спеціальним чином сформовану JSON-відповідь, що містить команду для відображення помилок серверної валідації з інформацією про поля і помилки, що містяться в них.
- Якщо дані успішно пройшли валідацію і на сервері, сервер здійснює необхідні операції та повертає JSON-відповідь з командами, що описують дії, які клієнтська машина має виконати після успішного виконання операції.
Тобто сервер завжди відповідає певним набором команд для браузера, а браузер просто виконує дані команди на клієнській машині. Такий алгоритм роботи бібліотеки. Докладніший опис протоколу можна знайти у wiki, у розділі "Формат протоколу спілкування клієнта з сервером".
Щоб настроїти бібліотеку для роботи з сервером, додайте до вашої стандартної кнопки відправки форми класsenddata, завдяки якому кліки по кнопці будуть перехоплені та оброблені бібліотекою. Також їй можна додати два нові атрибути:
- data-input=" "
- data-link=" "
Тепер бібліотека не тільки вироблятиме клієнтську валідацію, а й відповідатиме за відправлення даних на сервер та обробку відповіді.
Приклад форми для Bootstrap-фреймворку з атрибутами валідації:
Тепер, натискаючи на кнопку «Зареєструватися», ми змусимо бібліотеку перевірити дані форми на валідність, а потім відправити їх на сервер і обробити відповідь.
Валідація на сервері
Валідацією на сервері повинен займатися той фреймворк, з яким ви працюєте. Бібліотека лише надає клас Commands, що спрощує створення коректної відповіді JSON з командами для клієнта.
Логіка має бути приблизно такою: якщо валідація полів не пройшла, то сервер повертає JSON-відповідь з командою відображення помилок. Якщо валідація пройшла успішно, сервер повертає JSON-відповідь з іншими командами, наприклад, редиректит користувача на сторінку повідомлення про успішну реєстрацію. Приклад підготовки відповіді на PHP:
Для фреймворку Laravel мною були створені спеціальні класи, завдяки яким робота бібліотеки в цьому фреймворку зводиться до дописування кількох рядків коду, після чого валідація починає працювати і на сервері.
Щоб увімкнути валідацію для будь-якого контролера та моделі Laravel, підключіть до потрібної моделі трейт для підключення функціоналу валідації, а також опишіть у ній масив із правилами валідації для полів:
Після цього, в коді обробки запиту, вам залишається лише замінити метод збереження моделі на новий:validateAndSave(), який автоматично вироблятиме валідацію даних перед відправкою, і якщо щось піде не так, виконання буде зупинено, а клієнту буде надіслано відповідь із командою відображення помилок валідації сервера. А також, замість стандартної відповіді,слід підготувати та повернути клієнту спеціальним чином сформовану JSON-відповідь, приклад можна побачити нижче:
МетодLaravelResponse::generateприймає асоціативний масив з команд та їх параметрів, які будуть виконані на клієнській машині та повертає у відповідь підготовлений Response-об'єкт.
Спочатку бібліотека підтримує лише дві команди:validation_errorsтаredirect. Перша команда використовується бібліотекою для відображення помилок форми, друга - для редагування користувача в інше місце. Ви можете легко розширити функціонал бібліотеки, додавши власні обробники команд, наприклад, ось так:
І після цього, з боку сервера, можна буде відправляти свою команду та параметри до неї, щоб вона була виконана браузером клієнта.
Загалом, на цьому все. Ось таким простим чином можна реалізувати валідацію на клієнті та сервері без зайвого головного болю, налаштування гігантських плагінів, написання купи коду в контролерах, і так далі) Сподіваюся, ця бібліотека допоможе комусь ще, і я не дарма писав весь цей текст)
Бібліотека не є рішенням на всі випадки життя і не націлена на подібний розвиток. Це скоріше невелика заготівля, яку ви можете використовувати та доопрацьовувати під свої потреби у власних проектах.
В даний момент, одна з проблем - це неможливість збирати інпути з тими типами, які були описані в стандартах HTML5, хоча їхню підтримку можна легко додати до бібліотеки, але в даний момент у мене просто не виникало цієї необхідності.
Одна з найчастіших проблем — це труднощі з отриманням вмісту з тих полів, до яких застосований якийсь додатковий плагін, як Chosen або CKEDitor. Саме для цих двох плагінів у бібліотеці вжевбудована підтримка, і вона коректно набуває значень з полів, пов'язаних з даними плагінами, але у світі існують тисячі інших плагінів, з якими вона може працювати некоректно. Слід враховувати це під час використання бібліотеки.