Как стилизовать поле ввода при ошибке, как на макете?

Question

[Артём Задойнов]

Answer 1

[McBernar]

В смысле? Покрасить рамку и добавить текст под инпутом. В каком месте проблема?

Comments

[Артём Задойнов]

Нужно, чтобы при не вводе данного поля, появлялось это, вместо обычной подсказки "заполните это поле"

[fallus]

Артём Задойнов,
Убрать аттрибут requided. Это из-за него показываются дефолтная подсказка.

Я пишу, как это сделать по-простому.

<input type="text" placeholder="Ваш Email" pattern="^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$"/>
<p class="error__block">Заполните поле!!!</p>

pattern - регулярка для проверки ввода email
(htmlbook.ru/html/input/pattern)

В CSS написать что-то вроде

.error__block{
  display: none;
}
input:invalid + .error__block{
  display: block
}

Для других инпутов(не email) нужны свои регулярки. Их легко найти в инете.
Также можно использовать аттрибуты min и max (минимальное и максимальное значения).

Answer 2

[Brad9aga]

https://developer.mozilla.org/en-US/docs/Web/CSS/:...

https://jsfiddle.net/qoe5rzLd/
примитив