CHAPTER 2 · 3 lessons · 3問

入力を検証する

空の入力をはじいて、エラーを言葉と見た目で伝える。

0 / 3 問クリア

アプリが動くようになったね。でも、いまのアプリには壊れない仕組みがない。なにも打たずに「ふやす」を押すと、空っぽの行ができてしまう。

これを止めるのが入力の検証(バリデーション)だよ。この章では、入力を受け付ける前に次の3つを足していく。

  • 空かどうかを調べて、空なら止める(ガード)
  • なにがダメだったかを言葉で伝える(エラーメッセージ)
  • 見た目でも「ここがおかしい」と示す(赤い枠)

この章では trim / return / hidden / classList を使って、この3つを順番に足していくよ。どれも1行で書ける小さな仕組みだけど、合わさるとまともなフォームになる。

この章のレッスン

空をはじく

  1. 06空の入力をはじく何も打たずにふやすと空の行ができてしまう。trim と return で止めよう。問題へ

エラーを伝える

  1. 07エラーを表示する空のまま送ったら「なにか書いてね」と教える。hidden を外してメッセージを出そう。問題へ
  2. 08エラー用の見た目に切り替える入力欄を赤い枠にする。classList.add でクラスを足して、直ったら remove で外そう。問題へ

つぎは「複数要素とイベント委譲」。要素をまとめて取り、親に1つだけリスナーを付けて効率よく捌く。