Найти в Дзене

Как сделать валидацию данных в HTML?

Фото автора hitesh choudhary Pexels
Фото автора hitesh choudhary Pexels

Валидацию является очень полезным инструментом при заполнении различных текстовых форм. С ее помощью пользователь сразу понимает что он сделал не так и сделал ли вообще.

Переходим к конкретному примеру:

То что вводим
То что вводим

То что получаем
То что получаем

А теперь мы введем имя пользователя и нажмем кнопку "Отправить". Вот что у нас получится:

Можно вписать любое имя: свое, брата, мамы, папы и т.д.
Можно вписать любое имя: свое, брата, мамы, папы и т.д.

Надпись "Вы пропустили это поле" и есть та самая валидация. Благодаря ей пользователь сразу понимает что он чего-то не сделал и поэтому данные не могут быть отправлены на сервер. Аналогичная ситуация будет и в том случае если пользователь введет пароль, но не укажет имя.

Теперь вернемся к исходному коду. В нем есть новый для нас элемент <label> и атрибут required.

Элемент <label> служит меткой для конкретного элемента формы (обратите внимание на то, что значения атрибутов for и type совпадают).

Атрибут required является отличным примером встроенной системы проверки введенных данных. Именно благодаря ему пользователь видит всплывающее предупреждение. В данном примере этот атрибут присвоен двум элементам формы из трех.

Спасибо за внимание!

Если статья оказалась полезной предлагаю подписаться на канал. Не пропусти выход новых интересных статей!)

P.S. Если возникли трудности пишите в комментариях или в сообщениях канала. Отвечу на все и всем)