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

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

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

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

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

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

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

Специфікація 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