PHPフォームの送信前にリアルタイムで入力チェック(JavaScript)

PHPのバリデーションは、確認もしくは送信ボタンをクリックすることで発生します。送信前にリアルタイムで、入力欄から離れたらエラーが入力欄のすぐ下に出るようにしたい時のトレーニングです。

ここでは、js-form.htmlで作成していますので、トレーニング後は必要な場合form.htmlに追加してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>php-contact06：バリデーション（blur）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: sans-serif;
      padding: 2em;
      background: #f9f9f9;
    }
    .form-row {
      margin-bottom: 1.5em;
    }
    label {
      display: block;
      font-weight: bold;
    }
    input[type="text"],
    input[type="email"] {
      width: 100%;
      padding: 0.5em;
      font-size: 1em;
    }
    .error {
      color: red;
      font-size: 0.9em;
      margin-top: 0.3em;
    }
    .actions {
      margin-top: 2em;
    }
    button {
      padding: 0.8em 1.5em;
      font-size: 1em;
    }
  </style>
</head>
<body>
  <h1>お問い合わせフォーム</h1>

  <form id="contactForm" action="confirm.php" method="post" novalidate>
    <div class="form-row">
      <label for="name">お名前 <span style="color:red;">※必須</span></label>
      <input type="text" id="name" name="name">
      <p class="error" id="error-name"></p>
    </div>

    <div class="form-row">
      <label for="email">メールアドレス <span style="color:red;">※必須</span></label>
      <input type="email" id="email" name="email">
      <p class="error" id="error-email"></p>
    </div>

    <div class="actions">
      <button type="submit">確認画面へ</button>
    </div>
  </form>

  <script>
    // DOM読み込み後に実行
    document.addEventListener('DOMContentLoaded', function () {
      const name = document.getElementById('name');
      const email = document.getElementById('email');
      const errorName = document.getElementById('error-name');
      const errorEmail = document.getElementById('error-email');

      // 名前欄：フォーカスが外れたらチェック
      name.addEventListener('blur', function () {
        if (name.value.trim() === '') {
          errorName.textContent = 'お名前を入力してください。';
        } else {
          errorName.textContent = '';
        }
      });

      // メールアドレス欄：フォーカスが外れたらチェック
      email.addEventListener('blur', function () {
        const val = email.value.trim();
        if (val === '') {
          errorEmail.textContent = 'メールアドレスを入力してください。';
        } else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(val)) {
          errorEmail.textContent = 'メールアドレスの形式が正しくありません。';
        } else {
          errorEmail.textContent = '';
        }
      });

      // 念のため、submit前にも最終チェック（入力されていなければ送信中止）
    //   document.getElementById('contactForm').addEventListener('submit', function (e) {
    //     let isValid = true;

    //     if (name.value.trim() === '') {
    //       errorName.textContent = 'お名前を入力してください。';
    //       isValid = false;
    //     }

    //     const val = email.value.trim();
    //     if (val === '') {
    //       errorEmail.textContent = 'メールアドレスを入力してください。';
    //       isValid = false;
    //     } else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(val)) {
    //       errorEmail.textContent = 'メールアドレスの形式が正しくありません。';
    //       isValid = false;
    //     }

    //     if (!isValid) {
    //       e.preventDefault(); // エラーがある場合は送信しない
    //     }
    //   });
    });
  </script>
</body>
</html>

JavaScriptの解説

JavaScript で blur イベントを使い、「入力欄からフォーカスが外れたとき」に未入力かどうかをチェックし、エラーメッセージを即時表示するしくみを実装しています。

ここではJavaScriptの理解が必要です。下記のページも参照しましょう。

`DOMContentLoaded` イベント

document.addEventListener('DOMContentLoaded', function () {
  // ここにすべての処理が入っている
});

ページが読み込まれたあとにスクリプトが実行されるようにするおまじない。
これがないと、HTMLがまだ表示される前に JavaScript が動いてしまい、getElementById でエラーになる可能性があります。

入力欄とエラーメッセージの要素を取得

const name = document.getElementById('name');
const email = document.getElementById('email');
const errorName = document.getElementById('error-name');
const errorEmail = document.getElementById('error-email');

name, email → 入力欄（<input>）
errorName, errorEmail → エラーメッセージを表示する <p class="error"> 要素

名前欄：`blur` イベントで未入力をチェック

name.addEventListener('blur', function () {
  if (name.value.trim() === '') {
    errorName.textContent = 'お名前を入力してください。';
  } else {
    errorName.textContent = '';
  }
});

blur は「フォーカスが外れたとき」に発生するイベント。
.trim() を使って、空白だけの入力も弾く。
エラーがある場合は <p class="error"> にメッセージを表示。
入力があればエラーメッセージを削除（空文字にする）。

`submit` イベントでも最終チェック

これは二重チェックですので、サンプルコードはコメント化しています。

document.getElementById('contactForm').addEventListener('submit', function (e) {
  let isValid = true;

  if (name.value.trim() === '') {
    errorName.textContent = 'お名前を入力してください。';
    isValid = false;
  }

  const val = email.value.trim();
  if (val === '') {
    errorEmail.textContent = 'メールアドレスを入力してください。';
    isValid = false;
  } else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(val)) {
    errorEmail.textContent = 'メールアドレスの形式が正しくありません。';
    isValid = false;
  }

  if (!isValid) {
    e.preventDefault(); // エラーがあれば送信を止める
  }
});

ユーザーがそのまま「送信」しようとしたときにも、入力値をチェック。
JavaScriptだけでなくsubmit前にも検証するのが安全な書き方。
e.preventDefault() でフォーム送信を中止します。

「送信ボタンを押したときのチェックは、confirm.php で PHP が行うから JavaScript でやらなくてもいいのでは？」と思うかもしれません。しかし、JavaScriptでもチェックしておくことはとても重要です。たとえ confirm.php 側でもPHPでバリデーションを行っていても、JavaScript側でもチェックしておくことは非常に有効かつ実践的です。

なぜJavaScript側でsubmitチェックが必要なの？

理由	内容
🔹 UX向上	ユーザーがエラーにすぐ気付ける → すぐ修正できる
🔹 サーバーの負荷軽減	エラーのある送信をサーバーに渡さずに止められる
🔹 confirm.php に直送信されたときの安全対策	JSバリデーションを無効化して送信された場合にもPHP側でチェックする必要はあるが、逆にJS側で止められるなら止めた方が親切
🔹 二重バリデーションは必須	「フロント（JS）」＋「バックエンド（PHP）」の両方で検証するのがセキュリティの基本

JavaScriptは「ユーザーのための即時チェック」、PHPは「セキュリティと最終防衛」の役割と考えます