Form onsubmit=return false

Form onsubmit="return false"：フォーム送信を制御するテクニック

Form onsubmit="return false" は、JavaScriptを使ってHTMLフォームの送信を制御するための重要なテクニックです。このテクニックにより、フォームのデフォルトの送信動作をキャンセルし、独自の処理を実行することができます。この記事では、onsubmit="return false"の使用方法と、フォーム送信制御の様々なテクニックについて解説します。

onsubmit="return false"の基本：フォーム送信のキャンセル

<form>タグにonsubmit="return false" を指定すると、フォーム送信時にJavaScriptのonsubmitイベントが発生し、そのイベントハンドラが実行されます。falseを返すことで、フォームの送信動作がキャンセルされます。

html
<form onsubmit="return false;">
  <!-- フォームの内容 -->
  <button type="submit">送信</button>
</form>​

このコードでは、送信ボタンをクリックしても、フォームは送信されません。return falseが送信をブロックし、他の処理（例えば、バリデーションやAjax通信）を実行する際に役立ちます。

onsubmit属性を使ったフォームバリデーション

フォーム送信前にバリデーションを行いたい場合、onsubmit属性にバリデーション関数を指定することで、送信前にエラーチェックを行い、エラーがあれば送信をキャンセルすることができます。

html
<form onsubmit="return validateForm(this);">
  <input type="text" id="name" required>
  <button type="submit">送信</button>
</form>

<script>
function validateForm(form) {
  if (form.name.value === "") {
    alert("名前を入力してください。");
    return false; // エラーがあれば送信をキャンセル
  }
  return true; // バリデーション通過後、送信を許可
}
</script>​

このコードでは、nameフィールドが空の場合に送信をキャンセルし、ユーザーに警告を表示します。

onclickとonsubmit：イベント発生タイミングの違い

onclickイベントは要素がクリックされたときに発生しますが、onsubmitイベントはフォームが送信される時に発生します。onsubmitは、送信ボタンがクリックされた場合だけでなく、Enterキーによる送信にも対応しているため、フォーム送信を制御する場合にはonsubmitを使用する方が適切です。

例えば、フォーム内で複数のボタンがあり、それぞれに異なる処理を行いたい場合は、onsubmitイベントを使用し、どのボタンがクリックされたかを判定する方法が有効です。

複数ボタンの判定：onsubmitとonclickの組み合わせ

フォームに複数の送信ボタンがある場合、onsubmitとonclickを組み合わせて、どのボタンがクリックされたかを判別し、異なる処理を実行することができます。

html
<form id="myForm">
  <input type="text" id="name" required>
  <button type="submit" onclick="setSubmitType('submit')">送信</button>
  <button type="button" onclick="setSubmitType('ajax')">Ajax送信</button>
  <input type="hidden" id="submitType" value="">
</form>

<script>
  function setSubmitType(type) {
    document.getElementById('submitType').value = type;
  }

  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // デフォルトの送信をキャンセル

    if (document.getElementById('name').value === "") {
      alert("名前を入力してください。");
      return;
    }

    const submitType = document.getElementById('submitType').value;
    if (submitType == 'submit') {
      // 通常のフォーム送信処理
      event.target.submit(); // フォームを送信
    } else {
      // Ajax送信処理
      // ここでAjaxによる送信処理を実装
      alert('Ajax送信');
    }
  });
</script>

この例では、通常の送信ボタンとAjax送信ボタンがあり、ボタンに応じて異なる送信処理が実行されます。

JavaScriptによるフォーム送信：submit()メソッド

JavaScriptのform.submit()メソッドを使うと、フォームをプログラムから送信することができます。しかし、submit()メソッドで送信した場合、onsubmitイベントは発生しないため、注意が必要です。つまり、フォーム送信をトリガーするのはsubmit()メソッドではなく、フォーム内の送信ボタンを通じてのみonsubmitイベントが発生します。

javascript
document.getElementById('myForm').submit(); // JavaScriptでフォームを送信​

この場合、onsubmitイベントで設定したバリデーションや他の処理は実行されません。

バリデーションと送信処理の実装例

次のコードは、バリデーションを行い、フォームの送信方法を選択できる例です。

html
<form id="myForm">
    <input type="text" id="name" required>
    <button type="submit" onclick="setSubmitType('submit')">送信</button>
    <button type="button" onclick="setSubmitType('ajax')">Ajax送信</button>
    <input type="hidden" id="submitType" value="">
</form>

<script>
  function setSubmitType(type) {
    document.getElementById('submitType').value = type;
  }

  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // デフォルトの送信をキャンセル

    if (document.getElementById('name').value === "") {
      alert("名前を入力してください。");
      return;
    }

    const submitType = document.getElementById('submitType').value;
    if(submitType == 'submit'){
        // 通常のフォーム送信処理
        event.target.submit(); // フォームを送信
    } else {
        // Ajax送信処理
        alert('Ajax送信');
    }
  });

</script>​

onsubmit="return false"の活用：様々なイベント処理

onsubmit="return false"は、フォーム送信のキャンセルだけでなく、JavaScriptで様々な処理を実行するためのトリガーとしても活用できます。例えば、フォームの入力内容に基づいて動的にHTMLを生成したり、他のJavaScript関数を実行したりすることができます。

html
<form onsubmit="return false;">
  <!-- JavaScriptで動的に生成した内容を処理 -->
  <button type="submit" onclick="generateContent()">コンテンツ生成</button>
</form>

<script>
function generateContent() {
  // 動的なコンテンツ生成処理
  alert("コンテンツを生成します！");
}
</script>​

まとめ：フォーム制御に不可欠なテクニック

Form onsubmit="return false"は、JavaScriptでフォーム送信を制御するための基本的かつ重要なテクニックです。フォームバリデーション、Ajax送信、そして様々なイベント処理の実装に役立ちます。onsubmitイベント、onclickイベント、submit()メソッド、そしてHTML5のフォーム関連属性を理解し、組み合わせることで、より高度なフォーム操作を実現できます。

参考文献

関連QA

質問 回答
onsubmit属性はどのように使いますか？ onsubmit属性に関数を指定し、trueまたはfalseを返します。
バリデーションをオンにするにはどうすればいいですか？ onsubmit属性を使用して、入力値をチェックする関数を呼び出します。
フォーム送信を完全に中止することはできますか？ はい、「return false」を返すことで、中止できます。

その他の参考記事:form onsubmit