【初心者向け】JavaScriptでメールアドレスの入力チェックを実装する方法｜blur・focus・正規表現でバリデーション

フォームにメールアドレスを入力してもらう場面は、Webサイト運営ではよくありますよね。
しかし、入力ミスや未入力のまま送信されると、正しくメールを受け取れずに困ってしまうことも。
そんなときに役立つのが、JavaScriptを使ったメールアドレスの入力チェック（バリデーション）です。

この記事では、初心者でも理解しやすいように、blur（フォーカスが外れたとき）とfocus（フォーカスが当たったとき）のイベントを使って、
・メールアドレスが入力されているか
・正しい形式かどうか
をチェックする方法を、HTML・CSS・JavaScriptのコード例とともに丁寧に解説します。

「jQueryなし」「コピペOK」「わかりやすく」をモットーに、すぐ使える実装例をご紹介しますので、
自分のWebサイトやポートフォリオにバリデーションを入れたい方は、ぜひ参考にしてみてください。

---

なぜJavaScriptで入力チェックが必要なのか？

フォームにメールアドレスを入力してもらうとき、「未入力」や「誤った形式」のまま送信されてしまうと、こちらから返信できなかったり確認作業が増えたりしてしまいます。

こうしたトラブルを防ぐためには、入力内容を事前にチェック（バリデーション）して、ユーザーに修正を促す仕組みが必要です。
そのチェック処理を、ユーザーの操作と連動してすぐに反映できるのがJavaScriptの強みです。

入力ミスによるトラブルを防ぐ

たとえば、お問い合わせフォームで次のようなことが起きると、運営側にとっては大きな問題になります。

• メールアドレスが空欄で送信されてしまう
• 「example@.com」のように不正な形式のメールが入力されている
• 本人は正しく入力したつもりでも、タイプミスで届かない

こうした「ありがちな入力ミス」をその場で指摘して修正してもらえるのが、JavaScriptによるチェックです。

サーバーサイドのバリデーションとは違う役割

もちろん、サーバー側（PHPやPythonなど）でのチェックも必要ですが、
JavaScriptを使えば、送信前にその場でリアルタイムにチェックできるため、ユーザーにとっても使いやすいフォームになります。

しかも、入力ミスのたびにページを再読み込みする必要もなくなるため、
通信量や待ち時間を減らせるというメリットもあります。

ユーザー体験（UX）を改善できる

Webサイトにおいて使い勝手のよいフォームは信頼感にもつながります。
エラーメッセージをその場で表示したり、入力欄を赤くハイライトしたりといった細かな対応は、JavaScriptを使えば簡単に実現できます。

これにより、ユーザーは「どこが間違っていたのか」「何を修正すればいいのか」がすぐにわかるようになり、ストレスなく入力できるフォームに近づけることができます。

---

今回紹介する入力チェックの仕様

まずは、今回紹介するメールアドレスの入力チェックがどのような仕様で動作するのかを整理します。

JavaScriptの基本的な文法とDOM操作の知識があれば実装できる内容なので、初心者の方でも安心して読み進めてください。

See the Pen form-email by take it easy (@take-it-easy) on CodePen.

チェックするタイミング（blurとfocusイベント）

今回の実装では、以下の2つのタイミングで入力チェックやエラー処理を行います：

• blur（ブラー）イベント：ユーザーが入力欄からフォーカスを外したとき
• focus（フォーカス）イベント：再び入力欄をクリックしたとき

つまり、入力が終わって次の項目に移動したタイミングでチェックを行い、
エラーがあった場合はその場でメッセージを表示します。
そして、入力欄が選択された（focusされた）際にエラーメッセージを非表示にして、再入力しやすくする流れです。

チェック内容（必須／形式／エラー表示）

具体的には、次の2つのチェックを行います。

• 必須チェック：何も入力されていない場合にエラーを表示
• 形式チェック：メールアドレスの形式に合っていない場合にエラーを表示
  例：「@がない」「ドメイン名が不正」など

エラーがある場合は、以下のようなUI的な処理も行います。

• エラー内容を赤字で表示する
• 入力欄に赤い枠と背景色を付けて強調（CSSで制御）
• フォーカスし直すとエラーメッセージが消える

使用する技術（HTML・CSS・JavaScriptのみ）

このバリデーション機能は、JavaScript単体で完結するように設計しています。
今回、jQueryや外部ライブラリは使わず、以下の技術のみで構成されます。

• HTML：メールアドレス入力欄とエラー表示用のエリア
• CSS：エラー時の視覚的な強調（赤枠や背景色など）
• JavaScript：blur/focusイベントの処理、正規表現による形式チェック

そのため、どんなサイトにもコピペで応用しやすい構成になっています。

【HTML】メールアドレス入力欄の基本構造

まずは、メールアドレスを入力するためのHTML構造を作成します。
ここでは、ユーザーが入力する<input>要素と、エラーを表示する<div>要素をセットで設計します。

入力欄の基本構成

以下が、今回使用するHTMLのコード例です：

<div>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email" placeholder="sample@take-it-easy.site" size="40" />
  <div id="error-msg-email" class="error-msg" style="display: none;"></div>
</div>

各要素の役割とポイント

• <label for="email">
  入力欄と関連づけるラベルです。for属性でinputのidと一致させることで、ラベルをクリックしても入力欄がフォーカスされるようになります。
• <input type="email">
  メールアドレス用の入力欄です。type="email"にすることで、ブラウザによっては簡易的な形式チェックやモバイル端末での入力補助（@付きキーボード表示）などが行われます。
• placeholder属性
  入力欄に表示されるヒントテキストで、入力例を示すために使用します。
• size属性
  入力欄の表示幅を文字数で指定できます（例では40文字相当の横幅に設定）。
• <div id="error-msg-email">
  入力エラー時にメッセージを表示するための領域です。
  初期状態では非表示（display: none）ですが、エラー発生時にJavaScriptで内容を表示させます。

複数項目に応用しやすい構成

このように、入力欄＋エラー表示エリアをセットで構成することで、氏名や電話番号など他の項目にも同じ構造で応用しやすくなります。
また、CSSやJavaScript側でも要素のidやclassを使って柔軟に制御できるため、後述のバリデーション処理との連携もスムーズです。

---

【CSS】エラー時の視覚的な強調

入力チェックを行うだけでなく、「どこに、どんなエラーがあるのか」をユーザーに視覚的に伝えることも非常に重要です。
特にフォームではエラー箇所がひと目で分かるデザインが、入力ミスの修正をスムーズにします。

このセクションでは、メールアドレスの入力エラーが発生したときに、赤枠や背景色などで強調表示するためのCSSの書き方を解説します。

エラー表示の赤枠・背景色の設定方法

まずは、入力ミスがあった際に適用される .input-error クラスのスタイルを定義します。
JavaScriptからこのクラスを付与することで、見た目が自動的に切り替わるようになります。

/* 入力エラーがあったときのスタイル */
.input-error {
  border: 1px solid #d00;
  border-radius: 3px;
  background-color: #FCC;
}

• border: 赤い枠線でエラーを強調
• border-radius: 角を丸めて少し柔らかい印象に
• background-color: 薄い赤背景で目立たせる

色や太さは自由に調整可能ですが、視認性が高く、目に優しい配色を意識するのがおすすめです。

エラーメッセージのデザイン

エラーメッセージ自体の表示にも、ユーザーがストレスなく読めるような配慮が必要です。

/* エラーメッセージのスタイル */
div.error-msg p {
  color: #d00;
  margin: 0 0 0 8rem;
}

このように赤文字で表示し、入力欄の横や下に余白をつけて配置することで、
**「どの入力欄に対するエラーなのか」**が直感的にわかるようになります。

ユーザーに優しいデザインのポイント

以下のような視覚的工夫も効果的です。

• アイコンやアニメーションを加える（例：⚠️マークやフェードイン）
• エラー文を丁寧に書く（例：「入力必須です」や「正しいメールアドレスを入力してください」など）
• エラー解除時にリアルタイムで見た目を戻す（次章で解説）

見た目の印象は、サイト全体の信頼性にも直結するします。エラースタイルにも手を抜かずに調整しましょう。

---

【JavaScript】メールアドレスの入力チェック処理

ここからは、実際にJavaScriptを使って、メールアドレスの入力チェックを実装していきます。
フォームの入力欄で「何も入力されていない」「形式が正しくない」などのミスを検出し、エラーメッセージを表示する処理です。

今回は、ユーザーが入力欄からフォーカスを外したタイミング（blur）でチェックを行い、
再び入力欄をクリックしたタイミング（focus）でエラーメッセージを非表示にする、という流れで処理します。

blur時の処理：トリムしてバリデーション実行

まずは、入力欄からフォーカスが外れたときの処理です。
入力値の前後に不要なスペースがあると正しくチェックできないため、trim()で除去してからチェック関数を呼び出します。

var input_email = document.getElementById('email');

input_email.addEventListener('blur', function() {
  input_email.value = input_email.value.trim(); // 前後の空白を削除
  validate_email(); // チェック処理を実行
});

focus時の処理：エラーメッセージを消す

ユーザーが再び入力欄をクリックしたときには、エラー表示をリセットして入力し直せる状態にします。

input_email.addEventListener('focus', function() {
  input_email.classList.remove('input-error'); // 赤枠などを削除
  var err_div = document.getElementById('error-msg-email');
  err_div.style.display = "none";
  err_div.innerHTML = ""; // エラーメッセージを削除
});

必須チェックと形式チェックの内容

次に、バリデーション関数 validate_email() の中で以下の2つのチェックを行います。

【1】必須チェック（空欄かどうか）

if (val === "") {
  err_msg_div.textContent = 'メールアドレスは入力必須項目です。';
  err_msg_div.style.display = "block";
  input_email.classList.add('input-error');
  return;
}

【2】形式チェック（正規表現）

var regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+$/;
if (!regex.test(val)) {
  err_msg_div.textContent = '正しいメールアドレス形式で入力してください。';
  err_msg_div.style.display = "block";
  input_email.classList.add('input-error');
  return;
}

この正規表現では、「@」の前後やドメイン名の構成をある程度制限し、一般的な形式ミスを検出できます。
厳密なRFC準拠ではありませんが、日常利用には十分です。

既存メッセージの重複表示を防ぐ方法

エラーが出るたびにメッセージを追加してしまうと、何度も同じ文が増えてしまいます。
これを防ぐため、エラーメッセージの挿入前に .innerHTML = "" で中身をクリアするようにします。

var err_msg_div = document.getElementById('error-msg-email');
err_msg_div.innerHTML = ""; // 表示前にクリア

これにより、表示されるメッセージが毎回1つだけになり、UIの見た目が整います。

---

【サンプルコードまとめ】HTML・CSS・JSを統合

ここまで、HTML・CSS・JavaScriptに分けて、メールアドレスの入力チェックの実装方法を解説してきました。
ここでは、それらを1つのサンプルコードとして統合し、すぐにコピペして使える形でご紹介します。

フォーム入力チェックの全体コード（コピペOK）

以下のコードは、ひとつのHTMLファイルにまとめて貼り付ければ、そのままブラウザで動作確認が可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>メールアドレスの入力チェック</title>
  <style>
    *:focus {
      outline: none;
    }

    .input-error {
      border: 1px solid #d00;
      border-radius: 3px;
      background-color: #FCC;
    }

    div.error-msg p {
      color: #d00;
      margin: 0 0 0 8rem;
    }

    input[type="email"] {
      line-height: 2em;
    }
  </style>
</head>
<body>
  <div>
    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email" placeholder="sample@take-it-easy.site" size="40" />
    <div id="error-msg-email" class="error-msg" style="display: none;"></div>
  </div>

  <script>
    var input_email = document.getElementById('email');

    input_email.addEventListener('blur', function() {
      input_email.value = input_email.value.trim();
      validate_email();
    });

    input_email.addEventListener('focus', function() {
      input_email.classList.remove('input-error');
      var err_div = document.getElementById('error-msg-email');
      err_div.style.display = "none";
      err_div.innerHTML = "";
    });

    function validate_email() {
      var val = input_email.value;
      var err_msg_div = document.getElementById('error-msg-email');
      err_msg_div.innerHTML = "";

      if (val === "") {
        err_msg_div.textContent = 'メールアドレスは入力必須項目です。';
        err_msg_div.style.display = "block";
        input_email.classList.add('input-error');
        return;
      }

      var regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+$/;
      if (!regex.test(val)) {
        err_msg_div.textContent = '正しいメールアドレス形式で入力してください。';
        err_msg_div.style.display = "block";
        input_email.classList.add('input-error');
        return;
      }
    }
  </script>
</body>
</html>

ブラウザで動作確認する手順

1. 上記のコードをテキストエディタ（VS Codeなど）で新規ファイルに貼り付ける
2. ファイル名を email-validation.html のように保存
3. ブラウザで開くだけで動作確認できます

このコードの使い方

• HTMLだけで構成されているので、WordPressのHTMLブロックや外部ページにも応用可能です
• ほかの入力項目（名前や電話番号）にも同じ構造でエラー処理を追加できます
• input-error クラスや error-msg のCSSは、サイトのデザインに合わせて自由に変更できます

---

よくあるエラーと注意点

JavaScriptでメールアドレスの入力チェックを実装する際、コードは一見シンプルでも実際の運用ではいくつか注意すべきポイントがあります。
ここでは、実装時に起こりがちなエラーやトラブルをあらかじめ確認しておきましょう。

メールアドレスの正規表現は万能ではない

今回使用している正規表現は、一般的なメールアドレスの形式に対応していますが、RFCに完全準拠しているわけではありません。

たとえば以下のようなアドレスは、正規表現によっては弾かれることがあります：

• user.name+tag@sub.domain.co.jp（サブドメイン＋タグ付き）
• あいうえお@例.jp（国際化ドメイン名）

厳密なチェックが必要な場面では、サーバーサイドでの再チェックや、より複雑な正規表現の導入が必要です。

input[type="email"] だけでは十分でない

HTMLのtype="email"属性には簡易的な形式チェック機能が含まれていますが、実際には以下のような制限があります：

• 空欄でも通ってしまう（必須チェックにならない）
• JavaScriptによる制御が必要なデザイン（赤枠やエラーメッセージ）には非対応

つまり、HTMLの属性だけではUXとして不十分なケースが多いためJavaScriptによる補完が推奨されます。

children[0]が存在しないときにエラーが出る

focusイベントでエラーメッセージを削除する際、下記のようなコードを使っていると子要素が存在しないときにエラーになります。

document.getElementById('error-msg-email').children[0].remove(); // ← NGの例

このようなケースでは、要素が存在するかをチェックしてから削除するか、innerHTML = ""で中身を一括クリアする方法が安全です。

// 安全な方法
document.getElementById('error-msg-email').innerHTML = "";

スマホではキーボードの切り替えが必要になることも

type="email"はモバイルでメール用キーボード（@マーク付き）を自動表示する機能がありますが、
一部のAndroidブラウザでは入力チェックが甘くなるケースもあります。

可能であれば、デバイス別の表示挙動もテストしておくと安心です。

フォーム送信ボタンとの併用にも注意

今回のサンプルでは blurイベントによるチェックのみを実装していますが、
送信ボタン（submit）時にもバリデーションを実行したい場合は、フォームの submit イベントにも処理を追加する必要があります。

form.addEventListener('submit', function(e) {
  if (!validate_email()) {
    e.preventDefault(); // エラーがあれば送信を止める
  }
});

これらの注意点を押さえることで、実用性の高いユーザーに優しいフォームを構築できます。

---

よくある質問（FAQ）

---

まとめ

今回は、JavaScriptを使ってメールアドレスの入力チェックを行う方法について解説しました。

ユーザーが入力欄からフォーカスを外したタイミングで、

• 未入力（必須チェック）
• 形式ミス（正規表現によるチェック）

を検出し、視覚的にエラーメッセージを表示する処理を実装しました。
さらに、再入力しやすいように focus イベントでエラーを消す処理も加えることで、使いやすくてストレスの少ないフォームが完成しました。

また、以下のポイントを抑えることで、より実用的なバリデーションを実装できるようになります。

• blur / focus イベントで自然なチェックを実現
• .input-error クラスで見た目の変化も明確に
• innerHTML = "" を使ったエラーメッセージのクリア処理
• 正規表現は用途に合わせて柔軟にカスタマイズ可能

これらの技術を応用すれば、名前・電話番号・パスワードなど他の項目の入力チェックにも対応できます。

JavaScript初心者の方でも、今回のコードをベースに少しずつ応用していくことで、
「使いやすくて信頼できるフォーム」を自分の手で作れるようになります。
ぜひ、あなたのサイトやポートフォリオに活かしてみてください。