予約フォームの検証

中段 / 目安 25分

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

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

フォームの送信は、放っておくとブラウザがページごと送り出してしまいます。書いた検証を効かせるには、送信の合図が走ったときに「今回は行かせない」と止める必要があります。それが preventDefault です。送信に伴うページ移動を防ぐため、今回の処理では最初に呼びます。

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

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

完成条件

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

進め方

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

待ち受ける関数は引数を1つ受け取れます。それが出来事そのものを表すオブジェクトで、preventDefault() を呼べる相手です。今回も関数の一番上で呼びます。たとえば検索フォームなら、イベント引数を次のように使えます。

searchForm.addEventListener("submit", function (event) {
  event.preventDefault();
  console.log("検索を始めます");
});

event は予約名ではなく送信の出来事です。ひな形の showError() はエラー文とクラスを出して受付結果を消し、showResult(name) はエラーを消して受付結果を出します。これらの中身は編集せず、検証した結果に応じて呼んでください。

前後の空白を落とすのは trim() です。たとえば " 京都 ".trim() は "京都"、" ".trim() は "" です。空文字かどうかは === "" で比べられます。空のときの処理を書いたら return で抜けると、その下に成功時の処理をそのまま続けられます。 たとえば音量の処理で if (volume === 0) { return; } と書くと、無音のときは関数をその場で終え、後ろの処理を実行しません。

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

1. 編集するのは用意済みの submit の関数の中だけ。最初に event.preventDefault() で送信を止める
2. nameInput.value.trim() で前後の空白を除いて読む
3. 名前が空なら showError() を呼び、return で成功処理へ進まないようにする
4. 名前があれば showResult(name) を呼ぶ。表示とクラス変更は補助関数に任せる
5. エラー時は前の受付結果を消し、成功時はエラー文と on クラスを消す動作が補助関数に用意されている