JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTMLフォームを送信する方法｜onsubmitイベントとバリデーションの実装

JavaScriptを使ってHTMLフォームを送信するには、onsubmitイベントが発生したタイミングでvalidate()関数を呼び出し、入力データの検証（バリデーション）を行うのが一般的な手法です。

フォーム送信とバリデーションの仕組み

ユーザーが「送信」ボタンをクリックすると、フォームのonsubmitイベントが発火し、ここでvalidate()関数が実行されます。この関数の戻り値によって動作が変わります。

  • false を返した場合： 入力内容に不備があると判断され、フォームの送信はキャンセルされます。同時にアラートで警告を表示し、該当する入力欄へフォーカスを移動します。
  • true を返した場合： すべての検証を通過したため、フォームのデータが action 属性で指定されたサーバーへ送信されます。

サンプルコード

以下のコードを実行して、JavaScriptによるHTMLフォームの送信処理を実際に試してみてください。名前・メールアドレス・郵便番号・国の4項目を検証する例です。

<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>

コードのポイント解説

このサンプルでは、以下のような検証処理を順番に行っています。

  • 名前のチェック： 入力欄が空の場合にアラートを表示し、送信を中止します。
  • メールアドレスのチェック： 空欄でないかを確認します。より厳密には正規表現による形式チェックを追加すると実用的です。
  • 郵便番号のチェック： 空欄、数値以外の文字（isNaN()で判定）、桁数が5桁以外の場合にエラーとします。
  • 国の選択チェック： 初期値「-1」（未選択状態）のままになっていないかを確認します。

すべての条件をクリアした場合のみtrueが返され、フォームのデータがサーバーへ送信されます。focus()メソッドを使ってエラー箇所の入力欄にカーソルを移動させることで、ユーザーは修正すべき場所をすぐに把握でき、使いやすいフォームになります。

  1. JavaScriptでHTMLの子ノードを削除する方法をわかりやすく解説

    Web開発において、DOM操作は欠かせないスキルのひとつです。その中でも「子ノード（子要素）を削除する」処理は、リスト項目の動的な追加・削除など、さまざまな場面で活用されます。 JavaScriptでは removeChild() メソッドを使うことで、親要素から指定した子ノードを取り除くことができます。以下に、実際に動作するコード例を示します。 コード例 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=widt

  2. HTMLで送信ボタンを別のWebページにリンクさせる方法

    送信（Submit）ボタンは、クリックするとフォームを自動的に送信する役割を持っています。HTMLフォームを活用すれば、ユーザーからの入力を簡単に受け取ることができます。<form>タグの中にフォーム要素を追加することで入力欄を作成でき、テキスト入力、ラジオボタン、送信ボタンなど、さまざまな種類の要素が用意されています。action属性でリンク先を指定する送信ボタンを別のWebページにリンクさせたい場合は、フォームのaction属性を使用します。action属性の値に移動先のURLやファイルパスを記述するだけで、送信ボタンがクリックされたときに指定したページへ遷移させることができま