От автора: приветствую вас, друзья. В предыдущей статье мы увидели, как легко и просто сделать обязательными поля, используя возможности HTML5. В этой статье мы продолжим тему валидации форм и увидим, насколько просто можно проверить не только обязательное заполнение полей формы, но и то, что именно мы вводим в эти поля. Приступим.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Чтобы не писать код заново, воспользуемся кодом из предыдущей статьи — Обязательные поля формы. Напомню, у нас есть несложная форма, в которой все поля обязательны к заполнению. Сделать поля обязательными нам помог атрибут required, добавленный к каждому из обязательных полей.
Отлично! Теперь браузер не дает пользователям отправлять пустую форму. Однако пользователю ничто не мешает набрать в полях что угодно, любую абракадабру и отправить форму. Это нас не устраивает, поскольку у нас есть поля, в которых хотелось бы видеть вполне конкретный формат данных: поле Email — для адреса email, поле Сайт — для URL сайта и т.д. Чтобы не пропускать данных, не соответствующих формату, нам необходима валидация формы.
Ранее для клиентской валидации мы были вынуждены искать jQuery плагин или же писать собственный код на JavaScript. Однако с HTML5 валидация стала куда проще и доступнее. Собственно, мы можем и вовсе обойтись без JavaScript и ограничиться лишь корректными значениями соответствующих атрибутов форм в HTML5.
Итак, у нас есть четыре поля формы. Поле для ввода имени имеет тип text. Он нам подходит, поскольку позволяет ввести любую текстовую строку. Идем дальше, поле для email. В HTML5 вместо типа text для такого поля мы можем использовать специальный тип, который так и называется — email. Давайте попробуем:
|
1 |
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required> |
Теперь при попытке ввести в это поле строку, не соответствующую формату email, браузер сообщит нам об этом:
Точно таким же образом мы можем поступить и с полем Сайт. Для валидации адреса URL есть одноименный тип — url:
|
1 |
<input type="url" class="form-control" id="url" name="url" placeholder="Сайт" required> |
Если теперь попробовать ввести адрес сайта без протокола (//, //, ftp://) или что-то, не являющееся адресом сайта, браузер не пропустит такую строку:
А что же делать с телефоном? Для него есть также свой тип поля — tel, однако валидация данного поля браузером не производится. Собственно, это вполне логично, поскольку формат телефонного номера в той или иной стране может быть своим? Как же валидировать поле телефона и другие возможные поля средствами HTML5? Об этом вы узнаете из следующей статьи.
Дополнительно по данной теме вы можете посмотреть этот урок. На этом все. Удачи!
