Вывести средством css сообщение о неверности поля почты

Question

<label for="email">email</label>
<input type="email" name="email" class="newTask__email" required />

для input[type=email]:invalid только с css нужно вывести сообщение о ошибке валидации.

input[type=email]:invalid+label:before {
   color: red;
   content: "email не валиден";
}

это дает сообщению висеть все время в фаерфокс, в хроме вообще не показывает.

как это нормально сделать?

Answer 1

С такой разметкой, как в вопросе, невозможно добиться поставленной задачи только с помощью CSS.

В теге <label> атрибут for принимает значение атрибута id (не name!), того элемента, к которому привязывается. У Вас атрибут id в теге <input> не указан.
Селектор + в данном правиле (input[type=email]:invalid + label:before) подразумевает наличие тега <label> сразу за тегом <input>. У Вас они стоят наоборот.

Ниже приведён очень "костыльный" вариант, но похоже, что единственный. При этом, разметку всё же нужно править. (В вашем случае, подход - только CSS - изначально неверный.)

input[type=email]:invalid+label::after {
  content: "E-mail не валиден";
  white-space: nowrap;
  position: absolute;
  left: 100%;
  top: 100%;
  padding: 3px;
  border: 1px solid red;
}

label {
  position: relative;
  float: left;
  padding: 3px;
}

<input type="email" id="email_1" name="email_1" class="newTask__email" autocomplete="new-password" required />
<label for="email_1">E-mail</label>
<br><br><br>
<input type="email" id="email_2" name="email_2" class="newTask__email" autocomplete="new-password" required pattern="\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b" />
<label for="email_2">E-mail</label>
<br><br><br>
<input type="email" id="email_3" name="email_3" class="newTask__email" autocomplete="new-password" pattern="\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b" />
<label for="email_3">E-mail</label>

БЛОГ НА HUSL

Вывести средством css сообщение о неверности поля почты

Ответы (1 шт):