Валідація форм у 2026 році: припиніть використовувати бібліотеки без потреби
У 2026 році вам не потрібна важка JavaScript-бібліотека для валідації форм.
Минулого місяця я випустив форму оформлення замовлення, не використовуючи жодних бібліотек валідації. Вона обробляла обов'язкові поля, формат email та довжину пароля, використовуючи лише нативний HTML та 30 рядків JavaScript.
Перш ніж запускати npm install, скористайтеся цими шістьма нативними атрибутами, щоб вирішити більшість проблем:
• required: запобігає порожнім відправкам для текстових полів, селектів та чекбоксів.
• type: використовуйте type="email" або type="url", щоб виявляти базові помилки формату.
• minlength та maxlength: встановлюють ліміти символів без додаткової логіки.
• min, max та step: контролюють діапазони для чисел і дат.
• pattern: використовує regex для перевірки специфічних форматів, наприклад, поштових індексів.
• inputmode та autocomplete: зменшують кількість помилок, показуючи відповідну клавіатуру або заповнюючи відомі дані.
Якщо нативні повідомлення занадто загальні, використовуйте Constraint Validation API.
Кожен input має об'єкт validity. Ви можете перевіряти такі властивості, як valueMissing або typeMismatch, щоб створювати корисні повідомлення про помилки. Використовуйте setCustomValidity, щоб виводити власний текст.
Не забудьте очищувати своє кастомне повідомлення під час події input. Якщо цього не зробити, поле залишатиметься в стані помилки навіть після того, як користувач її виправить.
Щодо стилізації, припиніть використовувати JavaScript для відстеження того, чи було поле «торкнуте» (touched).
Тепер із цим справляється CSS псевдоклас :user-invalid. Він застосовує стилі лише після того, як користувач взаємодіяв із полем. Поєднайте його з селектором :has(), щоб автоматично показувати текст помилки. Це позбавляє десятки рядків зайвого коду.
Коли ж насправді варто використовувати бібліотеку?
Звертайтеся до бібліотеки лише у двох конкретних випадках:
- Валідація між полями: коли одне поле залежить від іншого, наприклад, «підтвердження пароля» або складна умовна логіка.
- Асинхронна валідація: коли потрібно перевірити базу даних, наприклад, «чи зайняте це ім'я користувача?».
Якщо вашій формі потрібні лише правила для окремих полів, використовуйте нативні можливості. Менше коду — менше багів. Починайте з браузера. Додавайте бібліотеку лише тоді, коли можливості браузера вичерпаються.
Додаткова спільнота для навчання: https://t.me/GyaanSetuAi