Cacher is the code snippet organizer for pro developers

input:not(:focus):valid {
  border: 1px solid green;
}

<input type="text" name="name" id="name" value="" pattern=".{3,}" required="" placeholder="Имя">

input:not(:focus):valid + span::after {
  content: '✓';
}