Валидация полей с HTML5 и CSS3

01.05.24 в 23:38

248

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

Подготовка

Нам потребуется структура формы для тренировки, каждое поле мы обернем в блок, и поместим рядом сообщение о том, верный ли формат значения находится в данном поле. Мы не будем использовать элемент Label, в качестве обозначения поля, а будем пользоваться свойством поля placeholder для этой цели.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Form validator</title>
</head>
<body>
    <form action="#" class="form">
        <div class="form__field">
            <input type="" name="name" placeholder="Логин">
            <span class="form__error"></span>
        </div>
        <div class="form__field">
            <input type="email" name="email" placeholder="Email">
            <span class="form__error">Email должен быть в формате example@example.com</span>
        </div>
        <div class="form__field">
            <input type="tel" name="phone" placeholder="Телефон">
            <span class="form__error"></span>
        </div>
        <button type="submit">Отправить</button>
    </form>
</body>
</html>

В коде мы подключили файл стилей style.css, в нем и будем мы оформлять поля, определять логику валидации и делать блоки form__error видимыми или скрытыми, так как их отображение требуется в случае если пользователь ввел некорректные данные. Но еще один момент, для валидации полей мы так же внесем изменения в структуру, наложив паттерн с регулярным выражением, которому будет следовать каждое отдельное поле. Например, в первом поле нам необходимо чтобы пользователь ввел данные латиницей, первый символ не был цифрой или специальным символом и длина допустим не менее 3 и не более 15 символов, в данном случае поле ввода логина и сообщение при несоответствии этого поля будет следующим:

<input type="text" name="name" placeholder="Логин" pattern="^(?=[a-z][a-z0-9._]{1,15}$)(?!.*[_.]{2})[^_.].*[^_.]$" minlength="3" maxlength="15">
<span class="form__error">Логин может содержать строчные латинские буквы и цифры</span>

Поле email уже имеет соответствующий тип и следовательно не нуждается в паттерне, если только у вас нет особых требований. Для ввода телефона мы будем использовать следующий формат: +7 (123) 456-78-90, соответственно наше поле всегда будет иметь одинаковую длину в 18 символов с учетом всех пробелов, дефисов и скобок и будет иметь следующий вид:

<input type="tel" name="phone" placeholder="Телефон" pattern="[\+]\d{1}\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}" minlength="18" maxlength="18">
<span class="form__error">Телефон должен быть в формате +7 (123) 456-78-90</span>

Для составления паттернов можно пользоваться следующей таблицей:

Выражение	Описание
\d [0-9]	Одна цифра от 0 до 9
\D [^0-9]	Любой символ кроме цифры
\s	Пробел
[A-Z]	Только заглавная латинская буква
[A-Za-z]	Только латинская буква в любом регистре
[А-Яа-яЁё]	Только русская буква в любом регистре
[A-Za-zА-Яа-яЁё]	Любая буква русского и латинского алфавита
[0-9]{5}	Пять цифр
[А-Яа-яЁё]{3,}	Не менее трех русских букв
[0-9]{,5}	Не более пяти цифр
[0-9]{2,8}	От 2 до 8 цифр
^[a-zA-Z\s]+$	Любое слово на латинице включая пробелы
^[А-Яа-яЁё]+$	Любое слово на русском
^[ 0-9]+$	Любое число
[0-9]{6}	Почтовый индекс
\d+(,\d{2})?	Число в формате 3,14 (разделитель запятая)
\d+(\.\d{2})?	Число в формате 1.20 (разделитель точка).
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}	IP-адрес

Стилизация полей

Теперь приведем в порядок внешний вид и подготовим дизайн полей для дальнейшей установки логики в CSS.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
	margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(#323c6c, #283054) center no-repeat;
}

.form {
	display: block;
	padding: 30px;
    background-color: #3d4982;
    box-shadow: 15px 15px 5px rgba(0,0,0,.05);
	width: 400px;
}

.form__field {
	margin-bottom: 20px;
}

.form__error {
	color: red;
	font-size: 0.7rem;
    text-align: right;
    text-transform: uppercase;
    font-weight: 900;
	display: block;
	margin-top: 15px;
    padding: 0;
	display: none;
}

.form input {
	outline: none;
	display: block;
	width: 100%;
    font-size: 1rem;
	border: 2px solid transparent;
    border-radius: 5px;
    background: #eeeeee;
    box-shadow: 8px 8px 0px rgba(0,0,0,.2);
	padding: 10px;
	box-sizing: border-box;
    transition: 0.3s all;
}

.form input:hover {
    background: #ffffff;
    box-shadow: 8px 8px 5px rgba(0,0,0,.2);
}

.form button {
	padding: 10px;
    float: right;
	border-radius: 2px;
	border: 0px;
    font-size: 1rem;
    border-radius: 5px;
    box-shadow: 8px 8px 0px rgba(0,0,0,.2);
	background: linear-gradient(#d733cd, #b524ad);
	color: #ffffff;
    transition: 0.3s all;
    cursor: pointer;
}

.form button:hover {
    filter: brightness(0.95);
    box-shadow: 8px 8px 5px rgba(0,0,0,.2);
}

Мы установили размер body равный размеру экрана, с помощью CSS Flexbox сделали отображение формы по центру, стилизовали элементы и сделали их отзывчивыми при взаимодействии с пользователем. Блоки form__error, являющиеся так называемым сообщением об ошибке мы сделали невидимыми, эти свойства будет менять логика которую мы добавим в следующем действии.

Добавляем логику валидаторов в CSS

Для добавления визуальной логики воспользуемся условными конструкциями CSS и псевдоклассами :valid и :invalid, они позволяют находить поля которые проходят или непроходят соответственно валидацию. После того как мы нашли то или другое поле нам необходимо прописать свойство при условии, что пользователь уже вводил какие-либо данные в эти поля и изменить цвет границы, соответствующий прохождению валидации. В качестве условного оператора используем отрицательный CSS псевдокласс :none(), а в качестве проверяемого значения текущее отображение placeholder получим с помощью другого псевдокласса :placeholder-shown. Таким образом конструкция для подсветки границ будет выглядеть следующим образом:

input:valid:not(:placeholder-shown) {
	border-color: #00aa00;
}

input:invalid:not(:placeholder-shown) {
	border-color: #ff0000;
}

А для отображения скрытого блока сообщения воспользуемся последним выражением, добавив к нему комбинатор следующего соседнего элемента + и укажем изменяемый элемент form__error.

input:invalid:not(:placeholder-shown) + .form__error {
	display: block;
}

Готовый результат можно посмотреть на CodePen.

css form html input поля валидация веб верстка

Валидация полей с HTML5 и CSS3

Подготовка

Стилизация полей

Добавляем логику валидаторов в CSS

Комментарии