フォーム送信時にJavaScript関数を呼び出す方法｜onsubmitイベントの使い方

Webフォームを送信する際、入力内容のチェック（バリデーション）を行いたい場面は多くあります。そんなときに活躍するのが onsubmit イベントです。

onsubmitイベントとは？

onsubmit イベントは、ユーザーがフォームを送信しようとしたタイミングで発生します。このイベントを利用することで、フォームのデータがWebサーバーへ送信される前に、JavaScriptによる入力値の検証（バリデーション）を実行できます。

基本的な仕組み

以下の例では、フォームデータをWebサーバーへ送信する前に validate() 関数を呼び出しています。

• validate() 関数が true を返した場合 → フォームは正常に送信されます
• validate() 関数が false を返した場合 → データは送信されず、処理が中断されます

JavaScript側のコード例

<script>
   <!--
      function validate() {
         // ここにすべてのバリデーション処理を記述します
         // .........
         // 検証結果に応じて true または false を返します
         return true; // または false
      }
   //-->
</script>

バリデーション関数内では、入力フィールドが空でないか、メールアドレスの形式が正しいかなどをチェックし、問題がなければ true、エラーがあれば false を返すようにします。

HTML側のコード例

<form method="POST" action="new.cgi" onsubmit="return validate()">
   …
   <input type="submit" value="送信" />
</form>

ポイントは onsubmit="return validate()" の部分です。return を付けることで、関数の戻り値（true / false）がそのままフォーム送信の可否として反映されます。return を忘れると、false が返されても送信が止まらないので注意しましょう。

まとめ

onsubmitイベントを使えば、サーバーにデータを送る前にクライアント側で入力チェックを行えます。これにより、無効なデータの送信を防ぎ、ユーザーにも即座にエラーを通知できるため、より使いやすいフォームを構築できます。