フォーム・バリデーション

概要

詳細解説

実践手順

1. 1
   基本的な入力フォームを作る 3分

   テキスト入力欄と送信ボタンをもつ簡素なフォームをHTMLで作ります。

   • <form>タグで全体を囲む
   • inputとbuttonを配置する

   
                             <form id="myForm">
     <label for="username">名前:</label>
     <input type="text" id="username" name="username">
     <button type="submit">送信</button>
   </form>
                           

2. 2
   JavaScriptで送信を止めて中身を見る 5分

   画面がリロードされてしまうのを防ぎ、JSで入力値を取り出します。

   • form要素のsubmitイベントを監視
   • e.preventDefault() で標準の送信をブロック
   • inputの .value を参照する

   
                             <script>
   const form = document.getElementById('myForm');
   const input = document.getElementById('username');
   
   form.addEventListener('submit', (e) => {
     // リロードを防ぐ
     e.preventDefault();
     console.log('入力された値:', input.value);
   });
   </script>
                           

3. 3
   空文字バリデーション（入力チェック） 5分

   何も入力されていない場合、エラーメッセージを出して処理を中断します。

   • 入力値が空（''）かどうかを if 文で判定
   • 空ならアラートを出して return する

   
                             <script>
   form.addEventListener('submit', (e) => {
     e.preventDefault();
     const val = input.value.trim(); // 前後の空白を消す
     if (val === '') {
       alert('名前を入力してください！');
       return; // ここで処理終了
     }
     alert('送信完了: ' + val);
   });
   </script>
                           

よくある質問

なんでわざわざボタンに type="button" って書くの？

formの中のボタンは、何も書かないと勝手に「俺は送信ボタン（submit）だ！」って爆走して画面リロードさせちゃうからです。単に「ポップアップを開くボタン」のつもりなら、明示的に type="button" って言って落ち着かせる必要があります。

バリデーションってHTMLのrequired付けるだけじゃダメ？

ダメじゃないです！HTMLのrequiredだけでもブラウザが吹き出しで怒ってくれるから超便利。ただ、「文字数は〜で、全角カタカナで…」みたいな複雑な縛りプレイをするときは、結局JSの力が必要になります。両方やるのが一番マッチョな構成です。

入力チェックの前に .trim() してるのは何の意味があるん？

ユーザーって、間違えてスペースキーだけ押して送信したりするんですよ。trim()をかますと前後の空白を全部消し飛ばしてくれるので、「スペースだけの入力」をブロックできます。フォーム作るときのマナーみたいなもんです！

formタグなんて使わずに、div置いてJSで送信ボタン作ればよくね？

動くは動くんですけど…そうすると「入力したあとEnterキー押して送信！」っていうブラウザの神機能が使えなくなっちゃうんですよ。Enter送信をJSで自作するのは超絶ダルいので、素直に form要素に任せた方が幸せになれます。