Як створити спливаючий лейбл поля вводу з HTML5 валідацією

20

Від автора: замінити JS валідацію форми на HTML5 набагато простіше, ніж ви думаєте. Тим більше з HTML5 валідацією ви отримаєте повний контроль над розміткою і стилями. Погляньте на демо.

Що нам потрібно зробити

Нам потрібно додати валідацію форми. Щоб все зробити правильно, ми почнемо з валідації з боку сервера. Потім, якщо ви хороший веб-дизайнер ви повинні додати валідацію на стороні клієнта, щоб користувач отримав повідомлення про правильність заповнення форми. І якщо ви дуже хороший дизайнер ви зробите ці повідомлення миттєвими, щоб користувач відразу зрозумів, що введений їм адресу електронної пошти відповідає формату.

Ви можете скористатися вашою улюбленою бібліотекою JQuery. Але ще крутіше буде vanilla JavaScript. Вам потрібно додати трохи більше розмітки, змінити стилі деяких елементів… додати пару правил JS валідації, з’єднати JS з сервером через AJAX. Вам доведеться побитися головою об клавіатуру, так як ви не укладетеся у кілька місяців, і вам доведеться розбиратися, як працює нова JavaScript бібліотека з валідації… і т. д.

Загальна картинка у вас склалася, не так весело. А що якщо можна пропустити весь JS і робити перевірку тільки за допомогою HTML5 атрибутів CSS?

Що таке HTML5 валідація форми?

Грубо кажучи: ви додаєте атрибути required або type=»email» до input, а браузер робить все інше. Спробуйте відправити дані з порожньої форми нижче в CodePen демо, а потім спробуйте відправити форму з неправильним форматом пошти:

Regex шаблони

Ви, можливо, помітили, що можна просто ввести адресу типу [email protected] Зрозуміло, що ви хочете, щоб полі приймало тільки справжні e-mail адреси. Задавши точний шаблон, ми зможемо контролювати введені дані. Давайте створимо шаблон, який повинен містити точку і два/три символи на кінці. Зробити це можна за допомогою атрибута pattern і regex.

Якщо ви вже знайомі з регулярними виразами, можете пропустити цю частину. Regex дуже потужний інструмент, який є в кожній мові програмування.

Я погано розумію складні регулярні вирази, тому загуглил «email regex» (я був впевнений, що цю проблему вже вирішили за нас) і знайшов regular-expressions.info. Нижче записано наше regex вираз з сайту regex101.com (дуже корисний ресурс для тіста регулярок).

^[A-Za-z0-9._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,}$

Якщо ви трохи читали про це шаблоні, то зрозумієте, чому автор виключив нижній регістр – очікується, що ви будете використовувати регістронезавісімий прапор. HTML5 input шаблони не приймають прапорів, тому для додавання символів в нижньому регістрі нам необхідно додати діапазон як у верхньому, так і в нижньому регістрі (тобто A-Za-z). Зрозуміти, за що відповідає кожна з частин шаблону можна на панелі праворуч.

Щоб наша форма могла відображати зрозумілі помилки, а не просто «невірний формат!», ми додамо атрибут title, який буде записуватися помилка:

Спробуйте ввести адресу пошти у демо нижче:

Не думайте, що вам доведеться писати надскладні шаблони для всіх форм. У більшості випадків вам знадобиться перевіряти дані на певний тип. Наприклад, число більше 5 записується так

І не забувайте, що не всі браузери підтримують різні атрибути валідації. Приміром, в Firefox не підтримується minlength, а pattern досить непогано себе почуває, тобто ви завжди можете продублювати функціонал. minlength можна продублювати з допомогою pattern=».{3,}», де 3 це мінімальна довжина.

Якщо ви не можете знайти шаблон з вашої старої JS бібліотеки, спробуйте пошукати в коді. JS бібліотеки використовують точно такі ж регулярні вирази, як і ми.

Миттєві повідомлення

Було б непогано, якби наша форма якось показувала правильність введених даних? На наше щастя є CSS селектор :valid. Також є і селектор :invalid. Введіть своє ім’я у демо нижче:

Ви відразу ж помітите, що стилі, показують неправильність введення, відображаються навіть, коли поле порожньо.
Ви можете подумати про :invalid:not(:empty), але це не спрацює, оскільки браузери тупі і завжди враховують порожнечу елемента форми.

Ми могли б схитрувати і додати новий псевдоклас :placeholder-shown, як в демо нижче, однак у нього жахлива підтримка, а сучасних полифилов на заміну йому ще немає.

На даний момент найкраще, що ми можемо зробити, це додати трохи JS для перемикання класів в залежності від порожнечі поля вводу. Нижче робоче демо:

Доведемо демо до досконалості

Найбільше в даному способі мені подобається, що ми маємо повний CSS контроль над будь-яким елементів форми. Додавши після тег input span, ми отримуємо доступ до тексту після елемента з класом .empty. Після цього можна створити уявний плейсхолдер, який буде красиво від’їжджати вгору після заповнення форми. Приклад:

Якщо span під input вам не подобається, або він не досить доступний, ви завжди можете використовувати JS, який буде додавати порожній клас до тегу label. Потрібно буде трохи переписати CSS код. Нижче приклад цієї техніки:

Класи валідації поширюються і на тег form, так що можете робити зі стилями все що завгодно. У цьому методі немає ніяких обмежень, ви можете робити все, що заманеться. Парочка ідей:

Можна додати іконки, які будуть плавно з’являтися/зникати

Можна злегка трусити поле введення, якщо користувач не натиснув на нього або ввів неправильні дані

Злегка затемняйте поля, якщо вони заповнені правильно

Підтримка

Відмінна в сучасних браузерах і IE10+

IE9 не підтримує псевдокласи валідації. Ви не зможете стилізувати инпут, але сама форма працює нормально

Можливий недолік

Не можна стилізувати повідомлення про перевірку. В браузерах ця можливість відключена. Я не думаю, що це погано, оскільки люди б скористалися цими стилями. Можливо, саме тому браузери вирішили відрубати доступ до них. Зараз же вони стандартизовані.

Також дані повідомлення не є частиною розмітки, так що вам не доведеться турбуватися про їх розміщення у формі. Якщо ж ви хочете повністю контролювати всі можливі стилі валідації форми, можливо, тоді цей метод не для вас.