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

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

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

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

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

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

Ранее для клиентской валидации мы были вынуждены искать 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 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на 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