<form action="">
  <input type="text" required>
  <span>is </span>
</form>
input + span {
  color: #999;
}

input:focus {  
  &:valid + span:after {
    content: 'valid';
    color: #0c0;
  }

  &:invalid + span:after {
    content: 'invalid';
    color: #c00;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js