Модуль 30

Валідація форм і UX

Ось готовий урок, створений спеціально для тебе у стилі CS50. Приготуй каву, вмикай режим допитливості, і поїхали! 🚀

🎓 Урок: Валідація форм і UX (Або як не змусити користувача розбити монітор)

Привіт, друзі! Мене звати [Твоє Ім'я], і це... CS50 (ну, майже).

Сьогодні ми говоримо про те, що стоїть на варті між хаосом і порядком у вебі. Про те, що відрізняє жахливий сайт від того, яким приємно користуватися. Ми говоримо про Валідацію форм та User Experience (UX).

1. 🔥 Вступ: Чому це болить?

Уявіть ситуацію. Ви купуєте квиток на літак. Вводите ім’я, прізвище, номер паспорта, дату народження, номер картки, адресу, індекс... Це займає 5 хвилин. Ви натискаєте кнопку "Купити".

Сторінка перезавантажується... і ви бачите порожню форму з маленьким червоним написом зверху: "Помилка введення даних".

Ваші емоції? Гнів? Відчай? Бажання кинути ноутбук у стіну? 🤬

Це — приклад поганого UX (користувацького досвіду) і відсутності нормальної валідації на стороні клієнта.

Аналогія з життя: Уявіть, що ви прийшли до чиновника подати заяву. Ви заповнюєте 10 сторінок вручну. Чиновник мовчки дивиться, чекає, поки ви допишете останню літеру, бере папери, перевіряє... і каже: "У вас тут в третьому рядку помилка. Переписуйте все заново". Жорстоко, правда?

Хороша валідація — це дбайливий асистент, який стоїть поруч і каже: "Ой, тут ви забули цифру, поправте одразу, будь ласка", ще до того, як ви віддали документи.

Чому без цього не можна? 1. Повага до користувача: Ніхто не хоче вводити дані двічі. 2. Безпека (Security): Якщо ми пустимо "сміття" у нашу базу даних, система впаде. Або її зламають.

2. 🧠 Теоретична база (Під капотом)

Давайте зазирнемо під капот. Валідація буває двох типів. Це критично важливо зрозуміти.

🅰️ Client-Side Validation (Валідація на клієнті)

Це "перша лінія оборони". Вона відбувається прямо в браузері (Chrome, Safari) за допомогою HTML та JavaScript. * Мета: Швидкий зворотний зв'язок (UX). * Як це працює: Браузер перевіряє дані до того, як вони полетять на сервер. * Аналогія: Фейсконтроль на вході в клуб. "Ти в кросівках? Не зайдеш". Це швидко.

🅱️ Server-Side Validation (Валідація на сервері)

Це "остання лінія оборони". Відбувається на бекенді (Python, PHP, Node.js). * Мета: Безпека даних та цілісність бази. * Як це працює: Сервер отримує дані, перевіряє їх ще раз і вирішує, чи зберігати їх. * Аналогія: Паспортний контроль всередині аеропорту. Тут перевіряють справжність документів.

❗️ ЗАПАМ’ЯТАТИ: Ніколи, чуєте, НІКОЛИ не довіряйте клієнту! Навіть якщо у вас суперкрута перевірка на JavaScript, хакер може її вимкнути за 2 секунди. Client-side — для зручності. Server-side — для безпеки.

Що таке хороший UX у формах?

Це не просто "працює / не працює". Це: 1. Ясність: Чому це поле червоне? (Напишіть: "Пароль занадто короткий", а не просто "Error"). 2. Своєчасність: Скажіть про помилку одразу, а не після сабміту. 3. Прощення: Дозвольте вводити номер телефону як 050 123 45 67 або 050-123-45-67, а самі "під капотом" приберіть зайві знаки.

3. 🧪 Приклади (Кодуємо!)

Рівень 1: Наївний підхід (Як робити НЕ треба)

<!-- Просто інпути. Можна ввести що завгодно або нічого -->
<form action="/register">
    <input type="text" name="email" placeholder="Email">
    <input type="text" name="age" placeholder="Вік">
    <button>Надіслати</button>
</form>

Що очікуєте? Користувач може відправити пусту форму. Або написати "привіт" замість віку. Сервер отримає сміття і, ймовірно, впаде з помилкою.

Рівень 2: HTML5 Attributes (Магія браузера)

Давайте додамо трохи "спецій" без жодного рядка JS.

<form action="/register">
    <!-- type="email" автоматично перевірить наявність @ -->
    <!-- required не дасть відправити пусте поле -->
    <input type="email" name="email" required placeholder="Email">

    <!-- min і max обмежать числа -->
    <input type="number" name="age" min="18" max="99" required placeholder="Вік">

    <button>Надіслати</button>
</form>

Чому це краще? Браузер сам не дасть натиснути кнопку, якщо дані некоректні. Це "безкоштовна" валідація.

Рівень 3: JavaScript + UX (Професійний підхід)

Але стандартні помилки браузера нудні. Давайте зробимо красиво: підсвітимо поле червоним і напишемо повідомлення, поки користувач друкує.

<style>
    .error { border: 2px solid red; }
    .error-msg { color: red; font-size: 0.8em; display: none; }
</style>

<form id="myForm">
    <input type="password" id="pass" placeholder="Пароль (мін. 6 символів)">
    <span id="msg" class="error-msg">Пароль надто короткий! 😱</span>
    <button type="submit">Готово</button>
</form>

<script>
    const input = document.getElementById('pass');
    const msg = document.getElementById('msg');

    // Слухаємо кожне натискання клавіші
    input.addEventListener('input', function() {
        if (input.value.length < 6) {
            input.classList.add('error'); // Червона рамка
            msg.style.display = 'block';  // Показати текст
        } else {
            input.classList.remove('error'); // Прибрати рамку
            msg.style.display = 'none';      // Сховати текст
        }
    });
</script>

Що тут відбувається? Ми даємо миттєвий фідбек. Користувач ще не натиснув "Готово", а вже знає, що треба виправити. Це і є турбота про користувача.

4. 🛠 Практична частина

Час розім'яти пальці! Відкривайте редактор коду (VS Code, Sandbox, що завгодно).

Завдання 1: "Лінивий валідатор" Створіть HTML-форму для замовлення піци. Поля: "Адреса" і "Кількість". * Зробіть так, щоб не можна було замовити менше 1 піци і більше 10. * Використовуйте тільки HTML-атрибути (min, max, required).

Завдання 2: "Детектив паролів" Додайте поле "Підтвердження пароля". * Напишіть JS-скрипт, який перевіряє, чи збігаються поля Password і Confirm Password. * Якщо не збігаються — кнопка "Submit" має бути неактивною (disabled).

Завдання 3: "Регулярні вирази (RegEx) - Light" (Трохи складно, але ви зможете!) Створіть поле для введення нікнейму. * Правило: тільки літери та цифри, жодних пробілів. * Підказка: використовуйте HTML атрибут pattern="[A-Za-z0-9]+" або перевірте це в JS через .match().

Завдання 4: Кейс "А що, якщо..." Уявіть, що ви написали ідеальну JS-валідацію. Але користувач — це хитрий хакер, який вимкнув JavaScript у браузері. * Питання на подумати: Що станеться з вашою формою? Вона відправиться? * Як захиститися? (Відповідь ми знаємо з теорії: серверна валідація).

5. 💡 Мислення як у розробника

Як відрізнити новачка (Junior) від профі (Senior) у цій темі?

❌ Новачок: * Робить помилки типу "Invalid input" без пояснень. * Валідує дані тільки тоді, коли користувач натиснув "Submit" (і це бісить). * Думає: "Я перевірив це на фронтенді, на бекенді перевіряти не треба". (Фатальна помилка!)

✅ Досвідчений розробник: * Думає про крайові випадки (Edge cases): А якщо користувач вставить текст через Ctrl+V? А якщо введе емодзі? * Принцип "Fail Fast": Повідомляє про помилку якнайшвидше. * Доступність (Accessibility): Чи зможе незряча людина, що використовує скрінрідер, зрозуміти, де помилка? (Використовує aria-invalid, aria-describedby).

Порада від мене: Валідація — це не стіна, це поручні. Не блокуйте користувача, якщо це не критично. Якщо він ввів телефон як (050) 123-45-67, не змушуйте його видаляти дужки. Просто видаліть їх програмно перед збереженням. Будьте гнучкими!

6. 🧩 Підсумок

Ну що, видихаємо! 🌬

Сьогодні ми навчилися: 1. Розуміти різницю між клієнтською (для зручності) та серверною (для безпеки) валідацією. 2. Використовувати вбудовану силу HTML5 (required, type). 3. Писати простий JavaScript для покращення UX. 4. Розуміти, що валідація — це про турботу, а не про заборони.

Ви тепер вмієте: Створювати форми, які не бісять людей і захищають вашу систему від дурниць.

🔍 Що далі? Ми навчилися збирати "чисті" дані. Але куди вони діваються після того, як летять на сервер? Де вони живуть? На наступному уроці ми відкриємо двері у святая святих — Бази Даних і SQL. Готуйтесь, будемо структурувати світ!

А поки що — це був CS50. Щасти вам з кодом! 👋

← До списку уроків Наступний урок →