JavaScriptでフォームバリデーション

本記事では、JavaScriptを使って フォームバリデーション（入力チェック） を実装する方法を解説します。

「必須項目が未入力」「メールアドレスの形式が正しくない」などを送信前にチェックすることで、
ユーザー体験の向上とサーバー負荷の軽減につながります。

---

フォームバリデーションとは？

フォームバリデーションとは、ユーザーが入力した内容が正しいかを検証する処理のことです。

よくあるチェック項目

• 必須入力かどうか
• 文字数が適切か
• メールアドレス形式か
• パスワードの強度

JavaScriptによるバリデーションは、送信前に即座にフィードバックできる点がメリットです。

---

今回作成するサンプル

以下のようなシンプルなフォームを想定します。

• 名前：必須
• メールアドレス：必須・形式チェック

---

HTML（フォーム）

<form id="contactForm">
  <div>
    <label>名前</label><br>
    <input type="text" id="name">
    <p id="nameError" class="error"></p>
  </div>

  <div>
    <label>メールアドレス</label><br>
    <input type="email" id="email">
    <p id="emailError" class="error"></p>
  </div>

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

---

CSS（エラー表示用）

.error {
  color: red;
  font-size: 14px;
}

---

JavaScript（基本バリデーション）

const form = document.querySelector("#contactForm");

form.addEventListener("submit", (e) => {
  e.preventDefault(); // 送信を一旦止める

  let isValid = true;

  const name = document.querySelector("#name").value.trim();
  const email = document.querySelector("#email").value.trim();

  // エラーメッセージ初期化
  document.querySelector("#nameError").textContent = "";
  document.querySelector("#emailError").textContent = "";

  // 名前チェック
  if (name === "") {
    document.querySelector("#nameError").textContent = "名前は必須です";
    isValid = false;
  }

  // メールチェック
  if (email === "") {
    document.querySelector("#emailError").textContent = "メールアドレスは必須です";
    isValid = false;
  } else if (!email.includes("@")) {
    document.querySelector("#emailError").textContent = "メールアドレスの形式が正しくありません";
    isValid = false;
  }

  if (isValid) {
    alert("送信成功（仮）");
    // 実際の送信処理を書く
  }
});

---

正規表現を使ったメールチェック

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailPattern.test(email)) {
  document.querySelector("#emailError").textContent = "メールアドレスの形式が正しくありません";
  isValid = false;
}

---

入力中にリアルタイムチェックする

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", () => {
  if (nameInput.value.trim() === "") {
    document.querySelector("#nameError").textContent = "名前は必須です";
  } else {
    document.querySelector("#nameError").textContent = "";
  }
});

---

JavaScriptバリデーションの注意点

• 必ずサーバー側でも同じチェックを行う
• JavaScript無効環境では動作しない
• バリデーションロジックの肥大化に注意

👉 JavaScriptはあくまで「ユーザー体験向上用」と考えるのが重要です。

---

HTMLの標準バリデーションとの併用

<input type="email" required>

HTML5のバリデーションと組み合わせることで、 より安全で実装コストの低いフォームになります。

---

まとめ

• フォームバリデーションは入力ミス防止の基本
• JavaScriptで柔軟なチェックが可能
• サーバー側バリデーションは必須

---