Як створити форму валідації в HTML5?

5 хв. читання

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

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

Тут ви можете оглянути демо-версію форм.


1. Спеціальні типи вводу

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

Нові типи вхідних даних:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

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

<input type="email">

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

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


2. Обов'язкові поля

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

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

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

При установці атрибуту required для форми електронної пошти або телефону, наприклад, браузер очікує певний шаблон, якому необхідно слідувати, але поштові скриньки типу "z@kl" вважаються дійсними (далі ми розберемо, як це виправити).


3. Ліміти

Ми можемо встановити деякі основні обмеження, такі як максимальна і мінімальна довжина, максимальні значення для числових полів. Для того, щоб обмежити довжину для полів введення і полів тексту, використовуйте атрибут "maxlength".Можливо у вас з'явиться питання, а що коли значення буде перевищувати зазначене? Все доволі очевидно, форма просто буде обрізати його, не даючи писати/вставляти нові символи.

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

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

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

4. Стилізування

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

  • :valid
  • :invalid
  • :required
  • :optional
  • :in-range
  • :out-of-range
  • :read-only
  • :read-write

Це означає, що ви можете мати поля, які виглядають не так, як всі інші.

У нашому демо ми об'єднали "valid" і "invalid" селектори з псевдо класом "focus" для того щоб надати кольoру, коли користувач вибирає поле і починає щось друкувати.

input:focus:invalid,
textarea:focus:invalid{
	border:solid 2px #F5192F;
}

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

5. Підказки

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

Зверніть увагу, що різні браузери відображають спливаючі підказки по-різному. Наприклад у Chrome, повідомлення про помилку з'явиться під основним текстом більш дрібним шрифтом.

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

Блок помилки або її вміст за замовчуванням не може бути зміненим, для цього треба використати JavaScript, але про це ми з вами не будемо говорити.


6. Паттерни (шаблони)

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

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

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

<input type="email" name="email" required pattern="^\\S+@\\S+\\.\\S+$" title="example@mail.com">
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація