input・change・blur・submitの違い｜フォームではどのイベントを使う？

<form class="form">
  <label for="username">ユーザー名（20文字以内）</label>
  <input type="text" id="username" class="js-name" maxlength="20">
  <p class="js-count">0 / 20文字</p>
</form>

const inputElement = document.querySelector('.js-name');
const countElement = document.querySelector('.js-count');

if (inputElement && countElement) {
  inputElement.addEventListener('input', (event) => {
    const currentLength = event.target.value.length;
    countElement.textContent = `${currentLength} / 20文字`;
  });
}

const inputElement = document.querySelector('.js-name');

// プログラム側で直接代入する
inputElement.value = '山田太郎';
// この操作では addEventListener('input', ...) は自動で発火しません

const inputElement = document.querySelector('.js-name');

if (inputElement) {
  inputElement.addEventListener('change', (event) => {
    console.log('入力が確定しました:', event.target.value);
  });
}

<form class="form">
  <label for="prefecture">お住まいの地域</label>
  <select id="prefecture" class="js-prefecture">
    <option value="">選択してください</option>
    <option value="aichi">愛知県</option>
    <option value="gifu">岐阜県</option>
    <option value="mie">三重県</option>
  </select>

  <label>
    <input type="checkbox" class="js-agreement"> 利用規約に同意する
  </label>
</form>

const selectElement = document.querySelector('.js-prefecture');
const checkboxElement = document.querySelector('.js-agreement');

if (selectElement) {
  selectElement.addEventListener('change', (event) => {
    console.log('選択された地域:', event.target.value);
  });
}

if (checkboxElement) {
  checkboxElement.addEventListener('change', (event) => {
    console.log('同意状態:', event.target.checked);
  });
}

const searchInput = document.querySelector('.js-search-input');

if (searchInput) {
  searchInput.addEventListener('input', (event) => {
    // 入力されるたびに候補リストを再計算
    updateSearchSuggestions(event.target.value);
  });
}

const termsCheckbox = document.querySelector('.js-terms-check');
const submitBtn = document.querySelector('.js-submit-btn');

if (termsCheckbox && submitBtn) {
  termsCheckbox.addEventListener('change', (event) => {
    // チェックが入っていればボタンのdisabledを解除
    submitBtn.disabled = !event.target.checked;
  });
}

const emailInput = document.querySelector('.js-email');

if (emailInput) {
  emailInput.addEventListener('blur', (event) => {
    console.log('入力欄からフォーカスが外れました:', event.target.value);
  });
}

<form class="js-form" action="/contact/send" method="post">
  <label for="user-email">メールアドレス</label>
  <input type="email" id="user-email" name="email" required>
  <button type="submit" class="js-submit">送信する</button>
</form>

const formElement = document.querySelector('.js-form');

if (formElement) {
  formElement.addEventListener('submit', (event) => {
    // フォーム送信時の処理
    console.log('フォーム送信が開始されました');
  });
}

// 注意：送信処理の監視としては不十分になる場合があります
const submitButton = document.querySelector('.js-submit');

if (submitButton) {
  submitButton.addEventListener('click', (event) => {
    // ボタンのクリック操作に依存した書き方
  });
}

// 推奨：form要素のsubmitイベントを監視する
const formElement = document.querySelector('.js-form');

if (formElement) {
  formElement.addEventListener('submit', (event) => {
    // クリックやEnterキーなどによる送信操作を一元的に処理できる
  });
}

formElement.addEventListener('submit', (event) => {
  // ブラウザ本来のフォーム送信動作をキャンセルする
  event.preventDefault();

  // JavaScript側で入力チェックやAjax（Fetch API）送信を行う
  console.log('送信を中断してJS側で制御します');
});

<form class="js-entry-form">
  <div class="form-group">
    <label for="comment">ご意見・ご要望（10文字以上・50文字以内）</label>
    <textarea id="comment" class="js-comment" rows="4"></textarea>
    <div class="field-info">
      <span class="js-char-counter">0</span> / 50文字
    </div>
    <p class="error-text js-error-message"></p>
  </div>

  <div class="form-group">
    <label>
      <input type="checkbox" class="js-agree-check"> 利用規約に同意する
    </label>
  </div>

  <button type="submit" class="js-submit-button" disabled>送信する</button>
</form>

const form = document.querySelector('.js-entry-form');
const textarea = document.querySelector('.js-comment');
const counter = document.querySelector('.js-char-counter');
const errorMsg = document.querySelector('.js-error-message');
const agreeCheck = document.querySelector('.js-agree-check');
const submitBtn = document.querySelector('.js-submit-button');

// 1. inputイベント：文字数のリアルタイム表示
if (textarea && counter) {
  textarea.addEventListener('input', (event) => {
    counter.textContent = event.target.value.length;
  });
}

// 2. blurイベント：入力欄を離れたタイミングでの単体チェック
if (textarea && errorMsg) {
  textarea.addEventListener('blur', (event) => {
    const value = event.target.value.trim();
    if (value.length < 10) {
      errorMsg.textContent = '10文字以上で入力してください。';
    } else if (value.length > 50) {
      errorMsg.textContent = '50文字以内で入力してください。';
    } else {
      errorMsg.textContent = '';
    }
  });
}

// 3. changeイベント：同意チェックボックスの切り替えでボタン活性化
if (agreeCheck && submitBtn) {
  agreeCheck.addEventListener('change', (event) => {
    submitBtn.disabled = !event.target.checked;
  });
}

// 4. submitイベント：送信時の全体バリデーション
if (form && textarea && agreeCheck && errorMsg) {
  form.addEventListener('submit', (event) => {
    const value = textarea.value.trim();

    // 文字数チェック
    if (value.length < 10 || value.length > 50) {
      event.preventDefault();
      errorMsg.textContent = '10文字以上50文字以内で入力してください。';
      textarea.focus();
      return;
    }

    // 利用規約チェック
    if (!agreeCheck.checked) {
      event.preventDefault();
      errorMsg.textContent = '利用規約への同意が必要です。';
      agreeCheck.focus();
      return;
    }

    // すべて通過した場合（デモ用として送信をキャンセルしてログ出力）
    event.preventDefault();
    errorMsg.textContent = '';
    console.log('バリデーション通過: データを送信します');
  });
}

const form = document.querySelector('.js-entry-form');
console.log(form);