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

37

Від автора: вітаю вас, друзі. У попередній статті ми побачили, як легко і просто зробити обов’язковими поля, використовуючи можливості HTML5. У цій статті ми продовжимо тему валідації форм і побачимо, наскільки просто можна перевірити не тільки обов’язкове заповнення полів форми, але і те, що саме ми вводимо в ці поля. Приступимо.

Вихідні файли поточної статті ви можете завантажити за посиланням.

Щоб не писати код заново, скористаємося кодом з попередньої статті — Обов’язкові поля форми. Нагадаю, у нас є нескладна форма, в якій всі поля обов’язкові до заповнення. Зробити поля обов’язковими нам допоміг атрибут required, доданий до кожного з обов’язкових полів.

Відмінно! Тепер браузер не дає користувачам відправляти порожню форму. Однак користувачеві ніщо не заважає набрати в полях що завгодно, будь-яку абракадабру і відправити форму. Це нас не влаштовує, оскільки у нас є поля, в яких хотілося б бачити цілком конкретний формат даних: поле Email — адреси email, поле Сайт — для URL сайту і т. д. Щоб не пропускати даних, не відповідних формату, нам необхідна валідація форми.

Раніше для клієнтської валідації ми були змушені шукати jQuery плагін або ж писати власний код на JavaScript. Однак з HTML5 валідація стала куди простіше і доступніше. Власне, ми можемо і зовсім обійтися без JavaScript і обмежитися лише коректними значеннями відповідних атрибутів форм в HTML5.

Отже, у нас є чотири поля форми. Поле для введення імені має тип text. Він нам підходить, оскільки дозволяє ввести будь-яку текстову рядок. Йдемо далі, поле для email. В HTML5 замість типу text для такого поля ми можемо використовувати спеціальний тип, який так і називається — email. Давайте спробуємо:

Тепер при спробі ввести в поле рядок, що не відповідає формату email, браузер повідомить нам про це:

Точно таким же чином ми можемо вчинити і з полем Сайт. Для валідації адреси URL є однойменний тип — url:

Якщо тепер спробувати ввести адресу сайту без протоколу (http:// https://, ftp://) або щось, що не є адресою сайту, браузер не пропустить такий рядок:

А що ж робити з телефоном? Для нього є також свій тип поля — tel, однак валідація даного поля браузером не проводиться. Власне, це цілком логічно, оскільки формат номера в тій чи іншій країні може бути своїм? Як же валідувати поле телефону і інші можливі поля засобами HTML5? Про це ви дізнаєтеся з наступної статті.

Додатково по даній темі ви можете подивитися цей урок. На цьому все. Удачі!