予約フォームの検証

中段 / 目安 25分

陽葵さんが受信箱を開いて見せてくれます。「これ見て。名前が空っぽの予約が、けっこう届くの……」。誰のものか分からない予約が並んでいます。「送信する前にチェックして、空ならエラーを出して！」

画面には id="reserve-form" のフォーム、id="name" の入力欄、エラーを出すための id="error"、受け付けた結果を出すための id="result" があります。error と result はどちらも最初は空です。

フォームの送信は、放っておくとブラウザがページごと送り出してしまいます。書いた検証を効かせるには、送信の合図が走ったときに「今回は行かせない」と止める必要があります。それが preventDefault です。これを呼ばないと、エラー文を出した次の瞬間に画面が作り直されて、書いたものが全部消えます。今回の判定はフォームの submit を止められる形（cancelable）で流すので、止める処理を書いていない解答は本番で必ず崩れます。必ず1行目で呼んでください。

名前が空のまま送られたら、#error にエラー文を出し、あわせて #error に on クラスを付けます。名前が入っていたら #error の文字を空に戻して on クラスも外し、#result に受け付けた旨と名前を出します。

入力欄に空白だけを打った人も「空っぽ」の扱いにしてください。

完成条件

• #reserve-form の submit を待ち受け、preventDefault() で既定の送信を止める
• 名前が空（空白だけを含む）なら #error に「お名前」を含むエラー文を出し、on クラスを付ける
• 名前が入っていれば #error の文字を空にし、on クラスを外す
• 名前が入っていれば #result に「承りました」と入力された名前を出す

進め方

待ち受けるのはボタンの click ではなく、フォームの submit です。click で書くと、キーボードの Enter で送られたときに素通りします。

待ち受ける関数は引数を1つ受け取れます。それが出来事そのものを表すオブジェクトで、preventDefault() を呼べる相手です。関数の一番上で呼んでしまうのが安全です。

前後の空白を落とすのは trim() です。空文字は条件式の中で偽として扱われるので、if (!name) の形がそのまま使えます。空のときの処理を書いたら return で抜けると、その下に成功時の処理をそのまま続けられます。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. #reserve-form の submit を待ち受け、preventDefault() で既定の送信を止める
2. 名前が空（空白だけも含む）なら #error にエラー文を出し、on クラスを付ける
3. 名前が入っていれば #error の文字を空にし、on クラスを外す
4. 名前が入っていれば #result に「承りました」と入力された名前を出す