.error {
  display: none; 
}
/* 隣接セレクタで
 * input:invalidの隣の
 * エラーメッセージは表示する
 */
input:invalid + .error {
  display: block;
  color: red;
  font-size: 0.9em;
}