1. Пройти інтерактивне опитування
  2. Опанувати веб конспект
  3. Виконати практичне завдання
  4. Створити тези до презентації


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

Інтерактивне повторення - опитувальник

Різні типи валідації форми

Існує два різних типи перевірки форми:

  • Перевірка на стороні клієнта - це перевірка, яка відбувається в браузері, перш ніж дані будуть відправлені на сервер. Це зручніше, ніж перевірка на стороні сервера, так як дає миттєву відповідь.
  • Перевірка на стороні сервера - це перевірка, яка виникає на сервері після відправки даних. Серверний код використовується для перевірки даних перед їх збереженням в базі даних. Якщо дані не проходять перевірку валідності, відповідь відправляється назад клієнту, щоб повідомити користувачеві, які виправлення повинні бути зроблені. Перевірка на стороні сервера не така зручна, як перевірка на стороні клієнта, оскільки вона не видає помилок до тих пір, поки не буде відправлена вся форма. Проте, перевірка на стороні сервера - це остання лінія захисту вашого додатки від неправильних або навіть шкідливих даних. Всі популярні серверні фреймворки мають функції для перевірки і очищення даних (що робить їх безпечними).

У реальному світі розробники схильні використовувати комбінацію перевірки на стороні клієнта і сервера.

Види валідації

  • Миттєва
  • Втрата фокусу
  • Відправка форми
Найшвидший спосіб повідомити про помилку - миттєва валідація. Але вона можлива тільки в тих випадках, коли в процесі введення зрозуміло, що значення некоректне. Зазвичай такі помилки пов'язані з неправильною розкладкою клавіатури (кирилиця замість латиниці) або введенням букв в цифрове поле (ІПН, КПП та ін.) Для цих випадків ми використовуємо поля з масками: введення невідповідних символів в них заблокований. Тому в наших інтерфейсах є тільки два види валідації:- Втрата фокусу- Відправка форми

Специфікація HTML5 дозволяє робити більш легку перевірку в зв'язку з введенням нових типів таких як email, url, або tel, і за допомогою них перевірка здійснюється автоматично

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

Обов’язкові поля

<input type="checkbox" name="terms" required >

Обмеження

<input type="text" name="name" required maxlength="15">

<input type="number" name="age" min="18" required>

Підказки

<input type="text" name="name" title="Please enter your user name.">

Шаблони

<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">

веб_урок_31.pdf
веб-_технології_31.pptx