Атрибути валідації
У кожному сучасному браузері вбудована можливість валідації вмісту полів форми без використання JavaScript. Для цього використовується комбінація різних типів полів та їх атрибутів. Якщо користувач ввів невалідне значення, браузер покаже повідомлення.
Поведінка вбудованої валідації форм відрізняється між браузерами, тому на практиці використовують JavaScript-бібліотеки. Проте, варто знати основи HTML5-валідації.
Обов'язкові поля
Логічний атрибут required позначає поле форми як обов'язкове для заповнення.
Якщо поле порожнє, браузер виведе повідомлення-підказку, а форма не буде
відправлена. Зовнішній вигляд повідомлення залежить від браузера і не може бути
змінений за допомогою CSS. Спробуйте відправити форму з прикладу, не заповнюючи
поля пошти або пароля.
Щоб зробити групу радіокнопок або чекбоксів обов'язковою, необхідно задати
атрибут required кожному елементу групи.
Обмеження довжини
Атрибути minlength і maxlength накладають обмеження на кількість символів,
що вводяться, наприклад для пароля або імені користувача.
Обмеження значення
Атрибути min і max дозволяють перевірити входження чисельного значення у
вказаний діапазон. Можуть використовуватися тільки в полях з типом number,
range або date.
Регулярний вираз
Атрибут pattern дозволяє вказати регулярний вираз (шаблон), щодо якого буде
перевірятися значення поля. Використовується для розширення базової валідації.
Наприклад, якщо потрібно, щоб ім'я користувача складалося з двох слів або пароль
містив хоча б один символ у верхньому регістрі, один в нижньому регістрі і одне
число.
Регулярні вирази - це спеціальна мова опису шаблонів, яка використовується у мовах програмування для пошуку, заміни або перевірки відповідності послідовностей символів у рядках.
За замовчуванням, у разі помилки валідації, браузер відобразить стандартний
текст «Please match the requested format». Додатковий текст-підказку, який буде
відображений у повідомленні від браузера, можна вказати в атрибуті title.