01 / 03
入力を検証する
INPUT · スライド
エラーを表示する
02 / 03
hidden で出し入れする
HTML にはもともと見えない要素を作る仕組みがある。hidden をつけた要素は画面に出てこないよ。
<p id="error" hidden></p> を用意しておいて、エラーのときに error.hidden = false で見せる。正しい入力が来たら error.hidden = true でまた隠す。
// エラーを見せるerror.textContent = "なにか書いてね"error.hidden = false// エラーを消すerror.hidden = true03 / 03
正しい入力でエラーを消す
エラーを出したあと、正しく入力してふやしたのにエラーが残っていたら変だよね。
だから、ガードを通過できた(=中身がある)ときはエラーを消す。出す場所と消す場所を一緒に考えるのが、表示制御のコツだよ。