Frontend Portal

Трясём и делаем валидацию поля ввода с помощью CSS и атрибута pattern



Атрибут pattern проверяет значение поля с помощью регулярного выражения.



Псевдокласс :invalid используется для стилизации инпута с ошибкой в заполнении(аналог :valid для верных заполнений)



HTML:

<input class="input" type="text" placeholder="Ваше имя" pattern="[A-Za-z]*">

CSS:

.input {

  outline: none;

  padding: 10px;

  font-size: 18px;

  border: 2px solid #111;

}



.input:invalid{

  border: 2px solid #e70707;

  animation: invalid 0.3s 2;

}



@keyframes invalid {

  25% {

    translate: 6px 0;

  }

  50% {

    translate: -6px 0;

  }

  75% {

    translate: 6px 0;

  }

}

👉 @FrontendPortal | #CSS