Атрибут pattern: HTML5 перевірка форми

20

Від автора: у цій статті ми розглянемо атрибут pattern і як з його допомогою проводити валідацію форм, а саме html 5 перевірка форми.

Валідація

Валідація форм, як і юзабіліті, має життєво важливе значення для безпеки сайту. В процесі перевірки перед відправкою форми оцінюються значення полів input на коректний формат вводу. Приміром, у нас є поле input для введення email а, в такому випадку значенням повинен виступати правильну адресу пошти; адреса повинен починатися з цифри або літери, потім знак » @ » в кінці доменне ім’я.

Специфікація HTML5 спростила процес перевірки форми, представивши нові типи поля input: e-mail, url, tel. Дані значення забезпечують автоматичну валідацію. При будь-якому розбіжності формату вводу дані input’и будуть видавати помилку, запобігаючи відправку форми.

Атрибут pattern: HTML5 перевірка форми

Однак очікувати повної обробки всіх можливих сценаріїв з полем input непрактично. Скажімо, у вас є поля для імені користувача, поштового індексу або інші спеціалізовані типи даних, що не входять в специфікацію? Як проводити перевірку цих полів? Ось тут нам і допоможе атрибут pattern.

Застосування атрибута pattern

Атрибут pattern застосуємо тільки до полів вводу. З його допомогою можна задавати наші власні правила валідації значення поля input за допомогою Регулярних Виразів (RegEx). І ще раз – якщо значення не збігається з заданим шаблоном, то вискачет помилка.

Приміром, у нас є поле імені користувача формі. Стандартизованого типу поля для імені користувача не існує, значить, ми скористаємося звичайним типом тексту:

Задамо правило перевірки за допомогою атрибута pattern. В нашому прикладі значення поля повинно складатися з літер нижнього регістру; ніяких великих літер, цифр або інших спеціальних символів. Крім того, довжина поля не повинна перевищувати 15 символом. У формі RegEx дані правила можна записати у вигляді [a-z]{1,15}. Пропишіть [a-z]{1,15} в якості значення атрибута pattern для поля username.

Тепер дане поле, приймає лише літери нижнього регістру. Будь-яке інше значення викличе помилку:

Атрибут pattern: HTML5 перевірка форми

Як видно на скріншоті вище, у повідомленні про помилку сказано «Please match the requested format». Тобто наша перевірка форми працює, але це повідомлення не дає уявлення користувача про те, який формат вводу від нього вимагається, а значить поганий UX.

Настроювання повідомлення про перевірку

На наше щастя ми можемо налаштувати текст повідомлення, щоб зробити його більш інформативним. У нашому розпорядженні кілька способів. Найпростіший-це задати атрибут title для input’а:

Тепер заголовок з’являється з текстом повідомлення за замовчуванням:

Атрибут pattern: HTML5 перевірка форми

І все ж спливаюче повідомлення хитливо. Якщо порівняти це повідомлення з повідомленням для поля email вище, то інструкція буде куди довше. Другий спосіб розв’язує дану задачу.

Заміна стандартного тексту повідомлення

Тепер давайте замінимо стандартний текст «Please match the requested format» на наш. Нам знадобиться трохи JavaScript. Почнемо з додавання id полю input для зручності вибору даного поля в JS.

Тепер ми можемо вибрати наше поле через JS і присвоїти йому змінну (код нижче або між тегів script, або в окремому JS файлі, або в панелі JS на CodePen):

І в кінці ми задаємо текст повідомлення, яке з’являється при неправильному введенні.

input.oninvalid = function(event) {
event.target.setCustomValidity(‘Username should only contain lowercase letters. e.g. john’);
}

Подія oninvalid успадковується від об’єкта event, в якому є кілька властивостей, серед яких target (елемент з неправильно введеним текстом) і validationMessage – містить текст повідомлення про помилку. У наведеному вище прикладі ми переписали текст повідомлення за допомогою методу setCustomValidity(). Наше повідомлення замінило стандартне.

Атрибут pattern: HTML5 перевірка форми

Стилі

Специфікація CSS3 додала декілька зручних псевдокласів на додаток до нових типів поля input і методами, описаними вище, використовуваних для зміни стандартного повідомлення про помилку. І це псевдокласи :valid and :invalid. З їх допомогою можна застосувати стилі до елементів залежно від їх стану, наприклад:

input:invalid {
border-color: red;
}
input,
input:valid {
border-color: #ccc;
}

Необхідно пам’ятати декілька речей при використанні псевдокласів:

Перше, :valid застосовується, навіть якщо поле порожнє. Тобто в коді вище ми встановили колір за замовчуванням border-color: #ccc;. Порожнє значення завжди проходить перевірку, якщо не додати атрибут required. В такому випадку значення поля стає невірним, і його рамка стає червоною.

Стилі для станів valid і invalid застосовуються миттєво з введенням користувачем тексту, навіть якщо значення порожнє. Таке миттєве зміна стилів може налякати користувачів.

Пару слів і стилізації спливаючих повідомлень

Валідація форм стала новим стандартом специфікації HTML5, проте зовнішній вигляд спливаючих повідомлень повністю лежить на розробниках браузерів. В різних браузерах дані поля виглядають по-різному, і вони можуть не поєднуватися з вашим UI.

Атрибут pattern: HTML5 перевірка форми

Google Chrome прибрав можливість налаштування стилів спливаючого поля пару років тому. Якщо ж вам необхідно стилізувати поле під себе, то залишається тільки повністю переписати дане поле за допомогою JavaScript. Розглянемо, як це зробити!

Розширюємо функціонал

Зараз ми створимо повністю кастомное спливаюче поле, яке буде з’являтися, коли користувач вводить неправильне значення. Для початку необхідно вибрати необхідні елементи з ідентифікаторами input і form:

var input = document.getElementById(‘username’);
var form = document.getElementById(‘form’);

Потім ми створюємо нові елементи, які будуть зберігати наше повідомлення:

var elem = document.createElement(‘div’);
elem.id = ‘notify’;
elem.style.display = ‘none’;
form.appendChild(elem);

Ми створили новий DIV, присвоїли йому id зі значенням notify і сховали його за допомогою display: none. В кінці ми вставляємо новий DIV у нашу форму.

Працюємо з подіями

Нам необхідно обробити дві події. Перше це invalid, яке викликається при розбіжності значення з шаблоном. Код нижче для події invalid:

input.addEventListener. (‘invalid’, function(event){
event.preventDefault();
if ( ! event.target.validity.valid ) {
elem.textContent = ‘Username should only contain lowercase letters e.g. john’;
elem.className = ‘error’;
elem.style.display = ‘block’;
input.className = ‘invalid animated shake’;
}
});

З допомогою event.preventDefault(); ми блокуємо спливаюче поле браузера. Натомість ми будемо показувати наше поле DIV, всередину якого ми додали текст з класом error. Поле показується за допомогою зміни значення display: block;
Також input’ми додали клас invalid, в якому прописали червону рамку.

input.invalid {
border-color: #DD2C00;
}

В додаток можна додати класи animated і shake з фреймворку Animate.css. Дані класи додадуть автентичності. Друга подія – input. Подія викликається при зміні значення поля. Дана подія ми будемо використовувати для повернення поля в нормальний стан, а також щоб ховати спливаюче повідомлення.

input.addEventListener. (‘input’, function(event){
if ( ‘block’ === elem.style.display ) {
input.className = «;
elem.style.display = ‘none’;
}
});

У коді вище ми видаляємо класи для поля input і ховаємо повідомлення.

Атрибут pattern: HTML5 перевірка форми

Тепер у нас повністю налаштоване спливаюче повідомлення. Спробуйте – введіть значення:

Заключні думки

Стандартні типи поля input і атрибут pattern додадуть вашій формі додатковий рівень захисту, але не забувайте і про валідацію форми на стороні сервера. Як не дивно навіть при відключеному JS останні версії браузерів показують спливаюче повідомлення не надсилається. Safari не підтримує атрибут pattern на момент написання статті. Проте схожий функціонал можна реалізувати з допомогою полифилла Webshim Lib. Сподіваюся, вам сподобався сьогоднішній урок, і ви будете тримати дану статтю під рукою, коли вам знадобиться скористатися HTML5 валідацією форми.