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

JavaScriptのonsubmitイベントとは？フォーム送信時のバリデーション実装方法を解説

onsubmitイベントの基本

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

例えば、「必須項目が空欄になっていないか」「メールアドレスの形式が正しいか」といったチェックを送信前に実行し、問題があれば送信をキャンセルするといった処理を実装できます。

onsubmitイベントの使い方

以下の例では、フォームデータをWebサーバーへ送信する前に、validate()関数を呼び出して入力チェックを行っています。validate()関数がtrueを返すとフォームは送信され、falseを返した場合はデータの送信が中止されます。

コード例

<html>
  <head>
    <script>
      function validate() {
        // ここにすべてのバリデーション処理を記述します
        // ..........
        // 結果として true または false を返します
      }
    </script>
  </head>
  <body>
    <form method="POST" action="t.cgi" onsubmit="return validate()">
      <!-- 入力フィールドなどのフォーム要素 -->
      <input type="submit" value="送信" />
    </form>
  </body>
</html>

ポイントは、onsubmit="return validate()"という記述です。returnによってvalidate()関数の戻り値がそのままフォーム送信の可否に反映されるため、falseが返された場合は送信処理が実行されません。

補足：addEventListenerを使った現代的な書き方

HTML属性に直接イベントを記述する代わりに、JavaScript側でaddEventListener()を使ってsubmitイベントを登録する方法も広く使われています。

document.getElementById("myForm").addEventListener("submit", function(event) {
  if (!validate()) {
    event.preventDefault(); // フォーム送信をキャンセル
  }
});

この方法では、HTMLとJavaScriptを分離できるため、コードの保守性が向上します。規模の大きなプロジェクトでは、こちらの書き方が推奨されることが多いです。

  1. JavaScriptのoninvalidイベントとは？基本的な使い方を実例付きで解説

    oninvalidイベントとはoninvalidイベントは、<input>要素に入力された値がバリデーション（妥当性チェック）に失敗した場合に発生するイベントです。例えば、required属性が設定された入力フィールドが空のままフォームが送信されようとしたときに、このイベントを利用して「入力が必要です」といった警告メッセージを表示できます。これにより、ユーザーがフォームの入力漏れに気づきやすくなり、ユーザビリティの向上につながります。主な活用シーン必須項目が未入力のまま送信ボタンが押されたときにアラートを表示する入力形式（メールアドレスや数値など）が不正な場合にカスタムメッセージを

  2. JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説

    イベントキャプチャ（Event Capturing）とはイベントキャプチャとは、発生したイベントがDOMツリーの最上位要素からターゲット要素へと向かって伝播していく仕組みのことです。これは、ターゲット要素から最上位要素へと逆方向にイベントが伝わるイベントバブリング（Event Bubbling）とは正反対の動作になります。なお、DOMにおけるイベント伝播は「キャプチャフェーズ」「ターゲットフェーズ」「バブリングフェーズ」の3段階に分かれており、イベントキャプチャはその最初の段階に相当します。windowやdocumentなどの上位ノードから順に、下位ノードへとイベントが降りていくイメージです。