IvanChapler
17:20 18-05-2022У меня почему-то формы изначально валидны, даже когда пустые
Здравствуйте дорогие друзья. Все мы прекрасно знакомы с новыми атрибутами типа(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 выводим сообщение пользователю. Ну я думаю общую суть и концепцию вы поняли.
На этом данная статья подошла к концу. Желая вам удачи и успехов! Пока!
Внимание!!! Комментарий теперь перед публикацией проходит модерацию
У меня почему-то формы изначально валидны, даже когда пустые