JavaScriptで基本的なフォームバリデーションを実装する方法｜サンプルコード付き解説

JavaScriptを使えば、フォームのデータをWebサーバーへ送信する前に、ユーザーのブラウザー上（クライアント側）で検証することができます。

基本的なフォーム検証では、必須項目がすべて正しく入力されているかを確認します。処理の流れとしては、フォーム内の各フィールドを順番に調べ、データが入力されているかをチェックするだけです。

実装例：基本的なフォーム検証

以下のコードを実行すると、JavaScriptによる基本的なフォーム検証の動作を実際に確認できます。

<html>
   <head>
      <title>フォーム検証</title>
      <script>
         // フォーム検証用の関数
         function validate(){
            if( document.myForm.Name.value == "" ) {
               alert( "名前を入力してください！" );
               document.myForm.Name.focus() ;
               return false;
            }
            if( document.myForm.EMail.value == "" ){
               alert( "メールアドレスを入力してください！" );
               document.myForm.EMail.focus() ;
               return false;
            }
            if( document.myForm.Zip.value == "" ||
                  isNaN( document.myForm.Zip.value ) ||
                  document.myForm.Zip.value.length != 5 )
            {
               alert( "郵便番号は5桁の数字（#####）で入力してください。" );
               document.myForm.Zip.focus() ;
               return false;
            }
            if( document.myForm.Country.value == "-1" ){
               alert( "国を選択してください！" );
               return false;
            }
            return( true );
         }
      </script>
   </head>

   <body>
      <form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
         <table cellspacing="2" cellpadding="2" border="1">
            <tr>
               <td align="right">名前</td>
               <td><input type="text" name="Name" /></td>
            </tr>
            <tr>
               <td align="right">メールアドレス</td>
               <td><input type="text" name="EMail" /></td>
            </tr>
            <tr>
               <td align="right">郵便番号</td>
               <td><input type="text" name="Zip" /></td>
            </tr>
            <tr>
               <td align="right">国</td>
               <td>
                  <select name="Country">
                     <option value="-1" selected>[選択してください]</option>
                     <option value="1">アメリカ</option>
                     <option value="2">イギリス</option>
                     <option value="3">インド</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td align="right"></td>
               <td><input type="submit" value="送信" /></td>
            </tr>
         </table>
      </form>
   </body>
</html>

コードのポイント

onsubmitイベント：フォーム送信時にvalidate()関数が呼び出され、falseを返すと送信がキャンセルされます。
focus()メソッド：未入力の項目へ自動的にカーソルを移動させるため、ユーザーがどこを修正すればよいのか一目でわかります。
isNaN()関数：値が数値として妥当かどうかを判定します。郵便番号のように「5桁の数字であること」を条件にしたい場合に便利です。

実装時の注意点

クライアント側の検証はあくまでユーザーの利便性を高めるためのものであり、セキュリティ対策にはなりません。JavaScriptを無効化すれば検証を回避できてしまうため、サーバー側でも必ず同じ内容の検証を行うようにしましょう。

また、HTML5以降ではrequired属性やtype="email"など、ブラウザー標準のバリデーション機能も用意されています。簡単なチェックであればこれらを活用し、複雑な条件はJavaScriptで補うという使い分けも効果的です。

Google ChromeでJavaScriptをデバッグする方法【初心者向け】

JavaScriptで例外をキャッチする方法！try...catch...finallyの基本を解説

JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説
JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="
JavaScriptのmap()メソッドで配列を変換する方法を解説
JavaScriptで配列の各要素を別の値に変換したい場合、map()メソッドを使うのが最も一般的で効率的な方法です。map()は、元の配列の各要素に対して指定したコールバック関数を実行し、その戻り値から新しい配列を生成します。元の配列は変更されないため、安全に処理を行えるのが大きな特徴です。以下は、map()メソッドを使って配列の各要素を2乗に変換するサンプルコードです。コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&