01 / 03
文字だけでは見落とす
エラーメッセージは出るようになった。でも小さな画面ではメッセージに気づかないこともある。入力欄そのものが赤くなると、もっと分かりやすいよね。
見た目を変えるには、クラスを足したり外したりする。className で丸ごと書き替えるのではなく、1つだけ足して、1つだけ外すやり方を覚えよう。
入力を検証する
INPUT · スライド
エラー用の見た目に切り替える
01 / 03
文字だけでは見落とす
02 / 03
classList.add でクラスを足す
classList は、その要素が持っているクラスの一覧だよ。.add("is-invalid") で is-invalid というクラスが足される。
元から持っているクラスは消えない。いまあるクラスに1つ足すだけだから安全なんだ。
input.classList.add("is-invalid")// <input class="is-invalid"> になる03 / 03
classList.remove で外す
直ったら外す。.remove("is-invalid") で、そのクラスだけが取れるよ。
これも他のクラスには影響しない。足す → 外すのセットで見た目を切り替えるのが classList の基本だよ。
input.classList.remove("is-invalid")// <input> に戻る