Formのonsubmitとは？

Formのonsubmitとは？ フォーム送信を制御する重要な属性

「Formのonsubmitとは？」について解説します。onsubmitは、HTMLの<form>タグで使用されるイベントハンドラー属性であり、フォームが送信される直前にJavaScriptコードを実行し、送信前のバリデーションや送信処理のカスタマイズを可能にする非常に重要な機能です。この記事では、onsubmitの使い方とフォーム送信制御方法について詳しく解説します。

onsubmit属性の使い方：JavaScript関数の実行

onsubmit属性は、フォーム送信時に実行したいJavaScript関数を指定するための属性です。フォームが送信される直前に、この属性に指定した関数が実行されます。

例：onsubmitでJavaScript関数を実行する

html
<form onsubmit="return validateForm(event)">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username">
  <button type="submit">送信</button>
</form>

<script>
function validateForm(event) {
  // バリデーション処理
  const username = document.getElementById('username').value;
  if (username === "") {
    alert('ユーザー名を入力してください！');
    return false; // フォーム送信をキャンセル
  }
  return true; // バリデーション成功、送信実行
}
</script>​

上記の例では、onsubmit="return validateForm(event)"と記述されており、フォーム送信時にvalidateForm関数が呼び出されます。この関数内でバリデーション処理を行い、エラーがあれば送信をキャンセル（return false）し、エラーがなければ送信を実行（return true）します。

onsubmit属性でのフォーム送信制御：falseを返してキャンセル

onsubmit属性に指定したJavaScript関数がfalseを返すと、フォームの送信がキャンセルされます。これを活用することで、送信前にフォームの内容が正しいかどうかを確認することができます。

例：バリデーションエラーで送信をキャンセル

html
<script>
function validateForm(event) {
  const username = document.getElementById('username').value;
  if (username === "") {
    alert('ユーザー名を入力してください！');
    return false; // フォーム送信をキャンセル
  }
  return true; // バリデーション成功
}
</script>

<form onsubmit="return validateForm(event)">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username">
  <button type="submit">送信</button>
</form>​

このように、onsubmit属性を利用して、falseを返すことでフォームの送信を防ぐことができます。これにより、ユーザーがフォームを送信する前に必須項目の入力チェックなどを行うことができます。

onsubmitとaddEventListener：2つのイベント登録方法

onsubmitイベントは、onsubmit属性だけでなく、JavaScriptのaddEventListenerメソッドを使っても登録できます。addEventListenerを使用すると、複数のイベントリスナーを追加できるため、より柔軟にイベント処理が行えます。

例：addEventListenerを使った送信イベントの処理

html
<form id="myForm">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username">
  <button type="submit">送信</button>
</form>

<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
  const username = document.getElementById('username').value;
  if (username === "") {
    alert('ユーザー名を入力してください！');
    event.preventDefault(); // 送信をキャンセル
  }
});
</script>​

このコードでは、addEventListenerメソッドを使用して、submitイベントが発生した際に実行する関数を指定しています。event.preventDefault()を使って送信をキャンセルし、バリデーションエラーがある場合には送信を止めることができます。onsubmit属性を使う場合と異なり、こちらでは複数のイベントリスナーを追加することができ、柔軟に処理をカスタマイズできます。

SubmitEventオブジェクト：送信イベントの情報取得

onsubmitイベントハンドラーには、SubmitEventオブジェクトが渡されます。このオブジェクトは、送信イベントに関する詳細な情報を提供しており、たとえば、どのボタンがクリックされたか、送信されたフォームの情報などを取得することができます。

例：submitterプロパティで送信ボタンの情報を取得

html
<form id="myForm">
  <button type="submit" id="submitBtn">送信</button>
</form>

<script>
const form = document.getElementById('myForm');
form.onsubmit = function(event) {
  const submitter = event.submitter; // 送信ボタンの情報を取得
  console.log(submitter.id); // 送信ボタンのIDを表示
};
</script>​

この例では、SubmitEventオブジェクトのsubmitterプロパティを使用して、送信をトリガーしたボタンの情報を取得しています。submitterプロパティを利用することで、複数の送信ボタンがある場合でも、どのボタンがクリックされたかを判別することができます。

まとめ：onsubmitでフォーム送信を制御

onsubmit属性は、フォーム送信時に実行されるJavaScript関数を指定するための非常に重要な属性です。フォーム送信前にバリデーションを実行したり、送信処理をカスタマイズしたりすることができます。onsubmit属性を使う方法と、addEventListenerメソッドを使う方法の両方を理解し、適切に使い分けることで、より柔軟で高度なフォーム制御が可能になります。

フォームの送信制御をしっかりと実装することで、ユーザーの誤った入力を防ぎ、効率的かつ安全なフォーム操作を実現できます。

参考文献

MDN Web Docs - HTMLElement: onsubmit

関連する質問と回答

質問 回答
onsubmitイベントはどのように使用しますか？ onsubmitイベントは、フォームの送信時に特定の処理を実行するために使用します。JavaScriptの関数を呼び出し、送信をキャンセルすることもできます。
複数のフォームでonsubmitを使用できますか？ はい、複数のフォームそれぞれにonsubmitイベントを設定することができます。
onsubmit以外にフォームの送信を制御する方法はありますか？ はい、他にもinput要素のonchangeやonclickイベントを使用して、関連する入力値を確認する方法があります。

その他の参考記事:form onsubmit