onsubmitイベントでJavaScript関数を呼び出す方法｜フォーム送信前のバリデーション実装

onsubmitイベントは、ユーザーがフォームを送信しようとしたタイミングで発生するイベントです。このイベントを活用することで、フォームデータをWebサーバーへ送信する前に、入力内容のチェック（バリデーション）を行うことができます。

基本的な仕組み

以下の例では、フォーム送信前にvalidate()関数を呼び出しています。動作の流れは次のとおりです。

• validate()関数がtrueを返した場合 → フォームは送信される
• validate()関数がfalseを返した場合 → 送信処理がキャンセルされ、データはサーバーに送られない

JavaScript側のコード

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

HTML側のコード

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

ポイント解説

重要なのは、onsubmit="return validate()" のようにreturnキーワードを付けて関数を呼び出す点です。こうすることで、関数の戻り値がそのままイベントハンドラーの結果として扱われ、falseを返した場合にフォームの送信を阻止できるのです。もしreturnを付けずにonsubmit="validate()"と書いてしまうと、関数がfalseを返しても送信は止まらず、ページが遷移してしまいます。

なお、よりモダンなJavaScriptでは、HTML属性ではなく addEventListener('submit', ...) を使ってイベントを登録し、必要に応じて event.preventDefault() を呼び出して送信をキャンセルする方法も一般的です。ただし、シンプルなバリデーションであれば、本記事のようにonsubmit属性を使う方法でも十分に機能します。