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

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

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

Исходные файлы текущей статьи вы можете скачать по ссылке.

Чтобы не писать код заново, воспользуемся кодом из предыдущей статьи — Обязательные поля формы. Напомню, у нас есть несложная форма, в которой все поля обязательны к заполнению. Сделать поля обязательными нам помог атрибут required, добавленный к каждому из обязательных полей.

Отлично! Теперь браузер не дает пользователям отправлять пустую форму. Однако пользователю ничто не мешает набрать в полях что угодно, любую абракадабру и отправить форму. Это нас не устраивает, поскольку у нас есть поля, в которых хотелось бы видеть вполне конкретный формат данных: поле Email — для адреса email, поле Сайт — для URL сайта и т.д. Чтобы не пропускать данных, не соответствующих формату, нам необходима валидация формы.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>

Теперь при попытке ввести в это поле строку, не соответствующую формату email, браузер сообщит нам об этом:

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

<input type="url" class="form-control" id="url" name="url" placeholder="Сайт" required>

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

А что же делать с телефоном? Для него есть также свой тип поля — tel, однако валидация данного поля браузером не производится. Собственно, это вполне логично, поскольку формат телефонного номера в той или иной стране может быть своим? Как же валидировать поле телефона и другие возможные поля средствами HTML5? Об этом вы узнаете из следующей статьи.

Дополнительно по данной теме вы можете посмотреть этот урок. На этом все. Удачи!

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree