Валідація та збереження даних форми

Коли ви збираєте інформацію від людей, через форму, ви застосовуєте якісь перевірки. Недотримання цих вимог може призвести до втрати клієнтів, небажаних даних в вашій базі даних або навіть слабких місць в системі безпеки вашого сайту. Історично, створення перевірок було болісним процесом. На стороні сервера, процес полегшується завдяки фреймворкам, які обробляють все за вас, але на стороні клієнта, ви, як правило, користуєтесь JavaScript-бібліотеками, які доволі складно інтегрувати.

На щастя, HTML5 дає нам ряд можливостей, завдяки яким можна виконувати більшість перевірок. Форми в HTML5 тепер мають вбудовану підтримку для перевірки за допомогою використання спеціальних атрибутів і нових типів введення, і надають вам широкий контроль над CSS-стилями.

HTML5 Form Validation

Оцініть онлайн-демо і ознайомтесь з коротким оглядом основ HTML5 перевірки форм.

Спеціалізовані типи вводу

HTML5 вводить кілька нових типів введення. Вони можуть бути використані для створення полів вводу, які будуть приймати тільки певний тип даних.

• color

• date

• datetime

• datetime-local

• email

• month

• number

• range

• search

• tel

• time

• url

• week

Щоб скористуватися новими типами, включіть їх в якості значення атрибута type:

    <input type="email">

Якщо браузер не підтримує цей тип вводу, це поле буде вести себе, як звичайне поле для введення тексту. Також корисно знати, що деякі поля (наприклад, email і tel) викликають відкриття спеціалізованої клавіатури у мобільних пристроїв.

Для більш докладної інформації про нові типи введення, скористайтесь MDN wiki.

Обов'язкові Поля

Просто додавши "необхідний атрибут до <input>, <select>, </select><textarea>, ви повідомляєте браузеру, які значення повинні бути в цій області. Це як червона зірочка (*), яку ми бачимо в більшості реєстраційних форм.

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

Проблема тут в тому, що майже всі дані будуть виконувати цю вимогу - наприклад, ви можете обійти перевірку залишивши порожнє місце (ми покажемо вам, як запобігти цьому).

Коли ви встанлюєте потрібний атрибут для електронної пошти або поля url, браузер очікує певний шаблон, якому потрібно слідувати, але все це є доволі відносним, адреса пошти "z@zz" буде вважатися дійсною (читайте далі, щоб побачити, як обійти це).

Обмеження

Ми можемо встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів. Щоб обмежити довжину поля введення і textareas, використовуйте атрибут maxlength. Це означатиме, що забороняється введення значення, яке є більшим зазначеного в maxlength. Якщо користувач намагатиметься вставити з буферу рядок більший зазначеного, то форма просто обріже його.

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

Поле <input type="number"> використовує мах та min атрибути, щоб створити діапазон можливих значень (в нашому прикладі ми зробили мінімальний допустимий вік 18).

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

Стайлінг

CSS3 псевдо-класи дозволяють нам стилювати будь-які поля форми в залежності від її стану.

• :valid

• :invalid

• :required

• :optional

• :in-range

• :out-of-range

• :read-only

• :read-write

У нашому демо ми об'єднали в valid та invalid селектори з псевдо-класом focus, щоб змінювати колір поля форми на червоний або зелений, якщо користувач вибирає їх і починає заповнювати.

    input:focus:invalid,
    textarea:focus:invalid{
        border:solid 2px #F5192F;
    }
    
    input:focus:valid,
    textarea:focus:valid{
        border:solid 2px #18E109;
        background-color:#fff;
    }

Підказки

Ви, напевно, помітили, що при спробі відправити форму з невірно заповненими полями, з'являється спливаюче вікно. Встановивши атрибут title наших полів, ми можемо додавати підсказки про те, які дані очікуються.

Зверніть увагу, що різні браузери відображають спливаючі вікна по-різному. У Chrome, значення атрибуту title буде відображатися під основним повідомленням про помилку дрібним шрифтом. Firefox взагалі не відображає текст вашої спливаючої підказки, якщо Ви не використовуєте атрибут pattern, який потім береться в якості шаблону.

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

Помилки в полях форм не можуть бути змінені, це вимагає використання JavaScript, але це окремий туторіал.

Шаблони

Атрибут pattern дозволяє розробникам задавати регулярний вираз, який браузер буде регулювати введення даних користувачем, перш ніж дозволити відправку даних. Це дає нам великий контроль над записом даних, починаючи з часів, коли RegEx структури можуть бути досить складними та точними.

Тепер, з можливістю фільтрувати вхідні значення, форма в нашому прикладі приймає тільки повні адреси електронної пошти та пароль довжиною не менше 8 символів, включаючи хоча б одне число.

Ось як це можна використовувати:

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

Ми сподіваємося, що ця стаття допоможе вам отримати додаткові знання про способи валідації з HTML5. Дякую, що читаєте!