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

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

webfanat вконтакте webfanat youtube

CSS валидация

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 выводим сообщение пользователю. Ну я думаю общую суть и концепцию вы поняли.

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

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

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

IvanChapler

17:20 18-05-2022

У меня почему-то формы изначально валидны, даже когда пустые

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm