【jQuery】blur()でフォーカスが外れた瞬間に処理を実行する方法｜バリデーション実装まで

jQueryの blur() はフォーム入力フィールドからフォーカスが離れたときに発火するイベントです。ユーザーがフィールドを入力して次に移動した瞬間にバリデーションを実行するなど、リアルタイムバリデーションUIの実装に必須の機能です。

1. blur()の基本構文

blur() はフォーカスが外れたときに実行するハンドラーを設定します。focus() と対になるイベントです。

// ハンドラーを設定（入力欄からフォーカスが外れたら実行）
$('#input-name').on('blur', function () {
  console.log('フォーカスが外れました');
  console.log('入力値:', $(this).val());
});

// 短縮形（blur()メソッドに関数を渡す）
$('#input-name').blur(function () {
  // blurイベントのハンドラー
});

// 引数なしでblur()を呼ぶと、プログラムからblurイベントを発火できる
$('#input-name').blur();  // 手動でフォーカスを外す

2. フォーカスイベントの種類と違い

3. リアルタイムバリデーションの実装

フィールドを離れたタイミングでバリデーションを実行し、エラーメッセージを表示する定番パターンです。

<div class="form-group">
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email">
  <span class="error-msg" style="display:none;color:red;"></span>
</div>

$(function () {
  $('#email').on('blur', function () {
    var val     = $(this).val();
    var $error  = $(this).siblings('.error-msg');
    var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (val === '') {
      $error.text('メールアドレスを入力してください').show();
      $(this).addClass('is-error');
    } else if (!pattern.test(val)) {
      $error.text('正しいメールアドレスを入力してください').show();
      $(this).addClass('is-error');
    } else {
      $error.hide();
      $(this).removeClass('is-error').addClass('is-valid');
    }
  });

  // 入力中はエラー表示をクリア
  $('#email').on('focus', function () {
    $(this).siblings('.error-msg').hide();
    $(this).removeClass('is-error is-valid');
  });
});

input.is-error  { border: 2px solid #ef4444; }
input.is-valid  { border: 2px solid #22c55e; }
.error-msg      { font-size: 0.85em; margin-top: 4px; }

4. 複数フィールドをまとめてバリデーション

フォーム全体の必須フィールドを一括管理する実用的なパターンです。

$(function () {
  // 必須フィールドに blur を一括設定
  $('input[required], textarea[required]').on('blur', function () {
    validateField($(this));
  });

  function validateField($field) {
    var val    = $field.val().trim();
    var $error = $field.next('.error-msg');

    if (val === '') {
      $error.text('この項目は必須です').show();
      $field.addClass('is-error');
      return false;
    }
    $error.hide();
    $field.removeClass('is-error');
    return true;
  }

  // 送信前に全フィールドを検証
  $('form').on('submit', function (e) {
    var isValid = true;
    $('input[required], textarea[required]').each(function () {
      if (!validateField($(this))) isValid = false;
    });
    if (!isValid) e.preventDefault();
  });
});

5. focusとblurを組み合わせてUIを改善

$(function () {
  // フォーカス時に親要素にクラスを追加してスタイルを変える
  $('input, textarea').on('focus', function () {
    $(this).closest('.form-group').addClass('is-focused');
  }).on('blur', function () {
    $(this).closest('.form-group').removeClass('is-focused');
  });

  // フォーカス時にplaceholderを消す（古いブラウザ対応）
  $('input[placeholder]').on('focus', function () {
    $(this).data('placeholder', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).on('blur', function () {
    $(this).attr('placeholder', $(this).data('placeholder'));
  });
});

6. バニラJSとの対応

// バニラJS
document.getElementById('email').addEventListener('blur', function () {
  console.log('blur:', this.value);
});

// focusout は親要素から委任できる
document.getElementById('form').addEventListener('focusout', function (e) {
  if (e.target.tagName === 'INPUT') {
    validateField(e.target);
  }
});

まとめ

jQueryの blur() はフォームフィールドからフォーカスが外れたタイミングでリアルタイムバリデーションを実行するのに最適なイベントです。イベント委任が必要な場合は focusout を使い、フォーカス取得は focus() と組み合わせてUIを改善しましょう。

関連記事: jQueryで入力フォームバリデーションを実装する方法 / jQueryのhover()でマウスオーバー時に処理を実行する方法

よくある質問（FAQ）