【jQuery】フォームのバリデーションをjQueryで実装する

JavaScript
2026.05.30

こんにちは、かつコーチです。

前回はスライドショー・カルーセルをjQueryで実装しました。

今回は、お問い合わせフォームなどで欠かせないバリデーション（入力チェック）をjQueryで実装していきます。

素のJavaScript版では blur と input を組み合わせたリアルタイムバリデーションを扱いましたが、この記事ではまず基本形としてsubmitイベントでのチェックに絞って解説し、そのうえでリアルタイム化への発展も紹介します。

保守案件でよく見かけるのは、実はこの「submit時にまとめてチェックする」シンプルな形なので、まずはここから理解していきましょう。

submitイベントでのバリデーションとは

入力完了後にまとめてチェックする方式

バリデーションとは、入力された値が正しい形式・条件を満たしているかをチェックする処理のことです。

素のJS版のリアルタイムバリデーションが「入力中に少しずつチェックする」方式だったのに対し、submitイベントでのバリデーションは「送信ボタンが押された瞬間にまとめてチェックする」方式です。

方式チェックのタイミング向いている場面
submitイベントのみ送信ボタンを押したときシンプルなフォーム、保守コストを抑えたい案件
blur/inputと組み合わせ入力中・入力欄を離れたときユーザー体験を重視したいフォーム

まずはjQueryならではの書き方で、submitイベントでのチェックを実装してみます。

基本の実装手順

手順1：HTMLとCSSを用意する

<form id="contactForm" novalidate>
  <div class="field">
    <label for="name">お名前</label>
    <input type="text" id="name" name="name">
    <p class="error-message" id="nameError"></p>
  </div>

  <div class="field">
    <label for="email">メールアドレス</label>
    <input type="text" id="email" name="email">
    <p class="error-message" id="emailError"></p>
  </div>

  <button type="submit">送信する</button>
</form>

input.is-invalid {
  border-color: #e53935;
  background: #fff5f5;
}

.error-message {
  min-height: 20px;
  margin: 4px 0 0;
  font-size: 13px;
  color: #e53935;
}

novalidate 属性は、ブラウザ標準のバリデーション表示と自作のエラー表示が二重に出ないようにするためのものです。

手順2：jQueryでチェック関数を作る

$(function () {
  const rules = {
    name: function (value) {
      if (value.trim() === '') return 'お名前を入力してください';
      return '';
    },
    email: function (value) {
      if (value.trim() === '') return 'メールアドレスを入力してください';
      const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!pattern.test(value)) return 'メールアドレスの形式が正しくありません';
      return '';
    },
  };

  // 1つの入力欄をチェックして、エラー表示を更新する
  function validateField($input) {
    const name = $input.attr('name');
    const message = rules[name]($input.val());
    const $errorEl = $(`#${name}Error`);

    if (message) {
      $input.addClass('is-invalid');
      $errorEl.text(message);
    } else {
      $input.removeClass('is-invalid');
      $errorEl.text('');
    }

    return message === '';
  }

element.value に対応するのが $input.val()、element.textContent = ... に対応するのが $errorEl.text(...) です。

$input.attr('name') で、要素の name 属性を取得しています。

手順3：submitイベントを登録する

  $('#contactForm').on('submit', function (event) {
    event.preventDefault();

    const $name = $('#name');
    const $email = $('#email');

    const isNameValid = validateField($name);
    const isEmailValid = validateField($email);

    if (isNameValid && isEmailValid) {
      alert('送信しました（実際にはここでAPIにデータを送信します）');
      $(this).trigger('reset');
    }
  });
});

event.preventDefault() でフォームの通常送信（ページ遷移）を止めるのは、素のJavaScript版と同じです。

form.reset() に対応するのが $(this).trigger('reset') で、trigger() は「指定したイベントを疑似的に発生させる」jQueryのメソッドです。

よくあるつまずきポイント・エラー対処

Before/After：valとtextを取り違えてエラーが表示されない

私が初めてjQueryでバリデーションを実装したとき、text() を使うべき場所に val() を書いてしまい、エラーメッセージがまったく表示されない、という現象にハマりました。

❌ Before：val()とtext()を取り違えている

if (message) {
  $input.addClass('is-invalid');
  $errorEl.val(message); // pタグにval()を使ってもエラーメッセージは反映されない
}

val() は <input> や <textarea> のようなフォーム部品の値を取得・設定するメソッドです。

<p> タグのようなフォーム部品ではない要素に val() を使っても、値は設定されず、コンソールにもエラーは出ないため、原因に気づくまでしばらく時間がかかりました。

✅ After：要素の種類に合わせてtext()を使う

if (message) {
  $input.addClass('is-invalid');
  $errorEl.text(message); // pタグのテキストにはtext()を使う
}

「フォーム部品の値は val()」「それ以外の要素の文字列は text()」と、対象の要素によって使い分ける、と覚えておくとこの手のミスを防げます。

Before/After：セレクタのIDにスペルミスがあっても気づけない

もう1つよくあるのが、セレクタの文字列を動的に組み立てる際のスペルミスです。

❌ Before：IDの組み立てにミスがある

const $errorEl = $(`#${name}-error`); // HTMLのIDは"nameError"なのに"name-error"を探しに行く

$errorEl.text(message); // 何も起きない（対象の要素が存在しないため）

jQueryは、セレクタに一致する要素が存在しない場合でもエラーを出さず、空のjQueryオブジェクトを返すだけという性質があります。

そのため $errorEl.text(message) を実行してもコンソールに何も表示されず、「なぜかエラーメッセージが出ない」という状態だけが残ります。

✅ After：IDの命名規則をHTML側と揃える

const $errorEl = $(`#${name}Error`); // HTMLのid="nameError"と表記を統一する

原因が分からず詰まったときは、console.log($errorEl.length) を挟んで確認する癖をつけると早く気づけます。

length が 0 であれば「そのセレクタに一致する要素が見つかっていない」ということが一目で分かります。

応用：blur・inputと組み合わせてリアルタイム化する

素のJS版と同じ考え方をjQueryで書く

submitイベントだけのチェックに慣れたら、素のJS版で紹介したリアルタイムバリデーションもjQueryで実装できます。

$('#name, #email').on('blur', function () {
  validateField($(this));
});

$('#name, #email').on('input', function () {
  if ($(this).hasClass('is-invalid')) {
    validateField($(this));
  }
});

$('#name, #email') のように、カンマ区切りで複数のセレクタをまとめて指定できるのはjQueryらしい書き方です。

「形式チェックはblur」「一度エラーになった項目の再チェックはinput」という組み合わせの考え方自体は、素のJavaScript版とまったく同じです。

まとめ

この記事のポイント

  • submitイベントでのバリデーションは、送信ボタンが押された瞬間にまとめてチェックするシンプルな方式
  • element.valueはval()、element.textContentはtext()に対応する。使い分けを間違えると値が反映されない
  • jQueryはセレクタが一致しなくてもエラーを出さないため、console.log($el.length)で存在確認する癖をつける
  • $(this).trigger('reset')でフォームをリセットできる
  • blurとinputを組み合わせれば、素のJavaScript版と同じ考え方でリアルタイムバリデーションに発展できる

次に読むべき記事

次回は、スムーススクロールをjQueryで実装します。

animate()とscrollTopを組み合わせた実装方法を解説します。

→ 次の記事：スムーススクロールをjQueryで実装する

タグ：jQuery, 中級者向け, UI実装

タイトルとURLをコピーしました