HTMLフォーム送信をJavaScriptでキャンセル：3つの方法とサンプルコード

2024-06-16

JavaScript で HTML フォーム送信を中止する方法

onsubmit イベントと return false を使用する

これは最も一般的な方法で、以下の手順で行います。

送信したいフォーム要素に onsubmit イベントハンドラーを追加します。
イベントハンドラー内で、フォームデータの検証やその他の処理を行います。
すべての処理が正常に完了した場合は true を返します。そうでない場合は false を返します。

false を返すと、フォーム送信がキャンセルされ、サーバーにデータが送信されません。

<form onsubmit="return validateForm()">
  ... 入力フィールド ...
  <input type="submit" value="送信">
</form>

<script>
function validateForm() {
  // フォームデータの検証処理
  if (// 検証に合格した) {
    return true;
  } else {
    // エラーメッセージを表示
    alert("入力にエラーがあります。");
    return false;
  }
}
</script>

preventDefault() メソッドを使用する

この方法は、より新しいブラウザで推奨されています。以下の手順で行います。

送信ボタンの onclick イベントハンドラーに、event.preventDefault() メソッドを呼び出すコードを追加します。

このメソッドは、デフォルトの送信動作をキャンセルします。

<form>
  ... 入力フィールド ...
  <input type="submit" value="送信" onclick="preventSubmit(event)">
</form>

<script>
function preventSubmit(event) {
  event.preventDefault();
  // フォームデータの検証処理
  if (// 検証に合格した) {
    // フォーム送信処理を実行
    // ...
  } else {
    // エラーメッセージを表示
    alert("入力にエラーがあります。");
  }
}
</script>

補足

上記の例では、簡単な検証処理のみを示しています。実際の処理は、フォームの内容や目的に合わせて変更する必要があります。
エラーメッセージの表示方法や、フォーム送信処理の実行方法などは、自由にカスタマイズできます。

サンプルコード：フォーム送信前に名前と年齢の入力を確認

HTML

<form onsubmit="return validateForm()">
  名前：<input type="text" id="name" required><br>
  年齢：<input type="number" id="age" required><br>
  <input type="submit" value="送信">
</form>

JavaScript

function validateForm() {
  const name = document.getElementById('name').value;
  const age = document.getElementById('age').value;

  if (name === '' || age === '') {
    alert('名前と年齢を入力してください。');
    return false;
  } else {
    // 入力内容が正常であれば送信処理を実行
    // ...
    return true;
  }
}

このコードの説明

HTML フォームに onsubmit イベントハンドラーを追加し、validateForm() 関数を呼び出すようにしています。
validateForm() 関数では、以下の処理を行っています。
- getElementById() メソッドを使用して、フォーム要素の値を取得します。
- 名前と年齢のいずれかが空の場合、alert() メソッドでエラーメッセージを表示し、false を返して送信を中止します。
- 名前と年齢がどちらも入力されている場合は、true を返して送信処理を実行します。

このサンプルコードは、基本的なフォーム送信のキャンセル処理を理解するために役立ちます。実際の用途に合わせて、自由にカスタマイズしてください。

JavaScript で HTML フォーム送信を中止するその他の方法

addEventListener() メソッドを使用する

送信したいフォーム要素に addEventListener() メソッドを使用して、submit イベントリスナーを追加します。
すべての処理が正常に完了した場合は、イベントオブジェクトの preventDefault() メソッドを呼び出してデフォルトの送信動作をキャンセルします。

<form>
  ... 入力フィールド ...
  <input type="submit" value="送信">
</form>

<script>
const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
  // フォームデータの検証処理
  if (// 検証に合格した) {
    // フォーム送信処理を実行
    // ...
  } else {
    event.preventDefault();
    // エラーメッセージを表示
    alert("入力にエラーがあります。");
  }
});
</script>

jQuery を使用している場合は、以下のコードを使用してフォーム送信を中止できます。

$('form').submit(function(event) {
  // フォームデータの検証処理
  if (// 検証に合格した) {
    // フォーム送信処理を実行
    // ...
  } else {
    event.preventDefault();
    // エラーメッセージを表示
    alert("入力にエラーがあります。");
  }
});

カスタム属性を使用する

HTML5 では、onsubmit イベントハンドラーの代わりに、カスタム属性を使用してフォーム送信を制御できます。以下の例では、novalidate 属性を使用して、デフォルトの送信動作を無効にし、JavaScript で送信を制御しています。

<form novalidate>
  ... 入力フィールド ...
  <input type="submit" value="送信" onclick="validateForm(event)">
</form>

<script>
function validateForm(event) {
  // フォームデータの検証処理
  if (// 検証に合格した) {
    // フォーム送信処理を実行
    form.submit(); // フォーム要素の submit() メソッドを呼び出す
  } else {
    event.preventDefault();
    // エラーメッセージを表示
    alert("入力にエラーがあります。");
  }
}
</script>

注意事項

これらの方法は、すべてブラウザの互換性を考慮する必要があります。古いブラウザでは、すべての方法が正しく動作しない可能性があります。
フォーム送信を中止する前に、必ずユーザーにフィードバックを提供するようにしてください。エラーメッセージや警告メッセージを表示することで、ユーザーが入力内容を修正できるようにします。

javascript html forms