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

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

Артём Задойнов,
Убрать аттрибут 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 (минимальное и максимальное значения).