もう迷わない！jQueryで送信ボタンの無効化/有効化によるトラブルを解決

2024-04-02

jQuery で送信ボタンを無効化/有効化する

jQuery を使用して、フォーム送信ボタンを無効化/有効化する方法を解説します。

<form id="my-form">
  <input type="text" name="name" required>
  <input type="text" name="email" required>
  <button type="submit">送信</button>
</form>

$(document).ready(function() {
  // フォーム送信前に必須項目チェック
  $('#my-form').submit(function(e) {
    // 必須項目がすべて入力されているか確認
    const allInputsValid = $('input[required]').filter(function() {
      return $(this).val() === '';
    }).length === 0;

    // 必須項目が未入力の場合、送信をキャンセル
    if (!allInputsValid) {
      e.preventDefault();
      return false;
    }
  });

  // 入力欄に値が入力されたら送信ボタンを有効化
  $('input[required]').on('input', function() {
    const allInputsValid = $('input[required]').filter(function() {
      return $(this).val() === '';
    }).length === 0;

    if (allInputsValid) {
      $('button[type="submit"]').prop('disabled', false);
    }
  });
});

解説

フォーム送信前に必須項目チェック
必須項目が未入力の場合、送信をキャンセル

$('input[required]').filter(function() { ... }) で必須項目を取得し、$(this).val() === '' で空かどうかを確認します。

必須項目が一つでも空の場合は e.preventDefault(); return false; で送信をキャンセルします。
入力欄に値が入力されたら送信ボタンを有効化

$('input[required]').on('input', function() { ... }) で入力欄の input イベントを捕捉し、allInputsValid ですべての必須項目に入力があるか確認します。

すべての必須項目に入力があれば $('button[type="submit"]').prop('disabled', false); で送信ボタンを有効化します。

ポイント

上記コードはサンプルです。必要に応じて変更してください。
送信ボタンの無効化/有効化には disabled 属性を使用します。
必須項目チェックには required 属性を使用します。
その他の条件で送信ボタンを無効化/有効化したい場合は、条件分岐を追加してください。

HTML

<form id="my-form">
  <input type="text" name="name" required>
  <input type="text" name="email" required>
  <button type="submit">送信</button>
</form>

JavaScript

$(document).ready(function() {
  // フォーム送信前に必須項目チェック
  $('#my-form').submit(function(e) {
    // 必須項目がすべて入力されているか確認
    const allInputsValid = $('input[required]').filter(function() {
      return $(this).val() === '';
    }).length === 0;

    // 必須項目が未入力の場合、送信をキャンセル
    if (!allInputsValid) {
      e.preventDefault();
      return false;
    }
  });

  // 入力欄に値が入力されたら送信ボタンを有効化
  $('input[required]').on('input', function() {
    const allInputsValid = $('input[required]').filter(function() {
      return $(this).val() === '';
    }).length === 0;

    if (allInputsValid) {
      $('button[type="submit"]').prop('disabled', false);
    }
  });
});

送信ボタンを無効化/有効化する他の方法

<form id="my-form">
  <input type="text" name="name" required>
  <input type="text" name="email" required>
  <button type="submit">送信</button>
</form>

const submitButton = document.querySelector('button[type="submit"]');

// フォーム送信前に必須項目チェック
document.getElementById('my-form').addEventListener('submit', function(e) {
  // 必須項目がすべて入力されているか確認
  const allInputsValid = Array.from(document.querySelectorAll('input[required]')).filter(input => input.value === '').length === 0;

  // 必須項目が未入力の場合、送信をキャンセル
  if (!allInputsValid) {
    e.preventDefault();
    return false;
  }
});

// 入力欄に値が入力されたら送信ボタンを有効化
document.querySelectorAll('input[required]').forEach(input => {
  input.addEventListener('input', function() {
    // すべての必須項目に入力があるか確認
    const allInputsValid = Array.from(document.querySelectorAll('input[required]')).filter(input => input.value === '').length === 0;

    if (allInputsValid) {
      submitButton.disabled = false;
    }
  });
});