Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

CSS валидация

Здравствуйте дорогие друзья. Все мы прекрасно знакомы с новыми атрибутами типа(required, pattern, ..), типами данных(email, number, ...) которые предоставила нам спецификация HTML5. Тем самым с помощью них мы можем предотвратить возможность случайной отправки данных формы на сервер или подсказать заранее пользователю, что данные не пройдут нашу валидацию. CSS3 решила не отставать от своего собрата и предоставила нам новые псевдоселекторы с помощью которых мы можем задавать стили в зависимости от результатов работы атрибутов или типов полей при валидации.

Давайте рассмотрим их работу на примере следующей формы:

<form action="/" >
   <input required type="email"  placeholder="Ваш email" >
   <input  required type="text"  pattern="[A-Za-z0-9]{4,}" placeholder="Ваш имя" >
    <button type="submit">
        Отправить
    </button>
</form>

Здесь у нас стандартная html форма. Заметьте что мы не в одном из полей не воспользовались атрибутом required, скоро вы поймете почему.

Теперь поверх данной формы наложим следующий стили:

input{
    outline:none;
}
input:required {
    border: 2px solid blue;
}
input:valid {
    border: 2px solid green;
}
input:invalid {
    border: 2px solid red;
}

Здесь мы использовали псевдоселекторы валидации. В зависимости от результата прохождения валидации цвет рамки поля будет меняться. Как видите псевдоселекторов всего три

required - срабатывает когда поле пустое

valid - срабатывает когда данные валидны

invalid - срабатывает когда данные невалидны

Однако данный код работает не совсем коректно. Например у меня псевдоселектор required вообще не работал. Немного повозившись я смог обнаружить одну закономерность, а именно псевдоселекторы required и invalid конфликтуют между собой. Поэтому их лучше использовать по отдельности. К примеру, в полям которые содержать атрибут required лучше применять следующие стили:

input:required {
    border: 2px solid red;
}
input:valid {
    border: 2px solid green;
}

Учтите что псевдоселектор required работает только с полями содержащими данный атрибут. К полям которые не содержать атрибут required ,следовательно необходимо применить псевдоселектор invalid

input: invalid
{
    border: 2px solid red;
}
input:valid {
    border: 2px solid green;
}

Вообщем попробуйте сами. В применении стилей в зависимости от результатов валидации вы не ограничены.

<style>
    .password:required + span:after{
        Content:"Пароль должен содержать не менее 4 символов (a-z0-9)"
    }
    .password:valid + span:after {
        Content:"Пароль соответсвует"
    }
</style>
<form action="/" >
   <input  required type="text"  placeholder="Ваше имя" >
   <input  required class="password"  type="password" pattern="[A-Za-z0-9]{4,}" placeholder="Ваш пароль" >
    <span></span>
    <button type="submit">
        Отправить
    </button>
</form>

Здесь в зависимости от результатов валидации пароля мы с помощью css выводим сообщение пользователю. Ну я думаю общую суть и концепцию вы поняли.

На этом данная статья подошла к концу. Желая вам удачи и успехов! Пока!

Оцените статью

Еще статьи

Конструктор функций javaScript

переменные css

база данных php

Три полезных метода для работы с объектами в javaScript

Слияние веток GIT

камера html

карта изображения html

template html

border image css

Комментарии

В данном разделе пока нет комментариев!

История

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.