Введение
Используя формы в HTML5, Вы часто используете методы проверки (валидации) данных, ведь их игнорирование может привести: к потерям пользователей,к мусору в базе данных или к взлому сайта. Исторически сложилось, что создание форм с хорошей валидацией – сложная задача.
В HTML5 есть инструменты обработки данных для форм, с их помощью можно производить валидацию, включающую в себя специальные атрибуты и новые типы входных данных. Давайте разберем их детальнее.
1. Специализированные типы входных данных
В HTML5 введены несколько новых типов ввода. Они используются для создания поля ввода, принимающего только определенные типы данных.
Новые типы входных данных выглядят следующим образом:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Пример:
<input type="email"/>
Если браузер не поддерживает данный тип ввода, поле будет вести себя, как обычное поле ввода текста.
2. Обязательные поля для заполнения
Просто добавив атрибут "required" к <input>, <select> или <textarea>. , Вы говорите браузеру, что значение должно быть заполнено.
<input type="checkbox" name="terms" required >
3. Лимиты
Мы можем установить некоторые ограничения и лимиты, например, максимальные и минимальные значения для числовых полей. Чтобы ограничить длину поля ввода надо использовать атрибут "maxlength".
<input type="text" name="name" required maxlength="15">
Поле <input type="number" /> использует атрибуты "max"и "min", чтобы создать диапазон возможно-допустимых значений (в примере минимально допустимый возраст 18)
<input type="number" name="age" min="18" required>
4. Стилизирование
CSS3 псевдо-классы позволяют украсить форму в не зависимости от ее состояния. Это:
- :valid
- :invalid
- :required
- :optional
- :in-range
- :out-of-range
- :read-only
- :read-write
В примере мы объединили селекторы "valid" и "invalid" с псевдо-классом "focus" для закрашивания поля формы в красный или зеленый, в зависимости от того, что делает пользователь: выбирает или печатает.
Видео курсы по схожей тематике:
input:focus:invalid,
textarea:focus:invalid{
border:solid 2px #F5192F;
}
input:focus:valid,
textarea:focus:valid{
border:solid 2px #18E109;
background-color:#fff;
}
5. Подсказки
Вы замечали всплывающее окно с подсказкой при отправлении неправильно заполненной формы? Установив атрибут "title" для поля ввода, можно добавить подсказки, указывающие на ошибки при нарушении тех или иных правил валидации.
Обратите внимание, что разные браузеры отображают всплывающие подсказки по-разному. В браузере Chrome значение названия атрибута будет отображаться мелким шрифтом, под основным сообщением об ошибке. В Firefox другая проблема: использовав атрибут “pattern” после того как он берется в качестве шаблона, Вы не получите всплывающую подсказку.
<input type="text" name="name" title="Пожалуйста введите имя пользователя.">
6. Шаблоны
Атрибут "pattern", разрешает разработчикам задавать регулярное выражение, которое браузер сравнивает с данными ввода, прежде чем отправить форму заявки.
Бесплатные вебинары по схожей тематике:
Вот как это можно использовать:
<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">
С функцией фильтрования входных данных мы можем принимать только полный e-mail адрес.
Источник: http://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5/
Статьи по схожей тематике
