フォームの入力内容をリアルタイムでチェックする方法【HTML/CSS/JavaScript・サンプルコード付き】

フォーム

フォームの入力内容をリアルタイムでチェックする方法

フォームの入力内容をリアルタイムでチェックする方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、お名前とメールアドレスの入力内容をその場で確認し、入力状況に応じてメッセージを表示するサンプルを解説します。送信ボタンを押す前に入力漏れや入力ミスへ気付けるため、お問い合わせフォームや会員登録フォームなどで利用しやすい機能です。

このサンプルコードでは、お名前は未入力かどうかをチェックし、メールアドレスは未入力と形式をリアルタイムで確認します。入力内容が条件を満たしていない場合は、その場でエラーメッセージを表示するため、ユーザーは修正箇所をすぐに把握できます。HTMLでフォームを作成し、CSSでデザインを整え、JavaScriptで入力チェックを行うシンプルな構成です。

リアルタイムの入力チェックは、入力完了後にまとめてエラーを表示する方法よりも分かりやすく、ユーザーの入力負担を軽減できます。お問い合わせフォーム、会員登録フォーム、資料請求フォームなど幅広い用途へ応用できるため、実用的な入力チェック機能を導入したい方や、コピペで使えるサンプルコードを探している方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

お問い合わせフォーム

入力内容をリアルタイムでチェックします。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>フォームの入力内容をリアルタイムでチェック</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- フォーム全体を囲むエリア -->
  <div class="form-realtime-input-check_wrap">

    <!-- タイトル -->
    <div class="form-realtime-input-check_title">
      お問い合わせフォーム
    </div>

    <!-- 説明文 -->
    <p class="form-realtime-input-check_text">
      入力内容をリアルタイムでチェックします。
    </p>

    <!-- フォーム本体 -->
    <form class="form-realtime-input-check_form" novalidate>

      <!-- お名前入力欄 -->
      <div class="form-realtime-input-check_field">

        <label class="form-realtime-input-check_label" for="form-realtime-input-check-name">
          お名前
        </label>

        <input
          class="form-realtime-input-check_input"
          type="text"
          id="form-realtime-input-check-name"
          name="name"
          placeholder="山田 太郎"
        >

        <!-- お名前のチェック結果を表示するエリア -->
        <div class="form-realtime-input-check_message" data-message="name"></div>

      </div>

      <!-- メールアドレス入力欄 -->
      <div class="form-realtime-input-check_field">

        <label class="form-realtime-input-check_label" for="form-realtime-input-check-email">
          メールアドレス
        </label>

        <input
          class="form-realtime-input-check_input"
          type="email"
          id="form-realtime-input-check-email"
          name="email"
          placeholder="example@example.com"
        >

        <!--
          メールアドレスのチェック結果を表示するエリア

          このサンプルでは、
          ・@ が含まれている
          ・@ の前後に文字がある
          ・ドメイン部分に . が含まれている

          などの形式のみを確認しています。
          実在するメールアドレスかどうかは判定していません。
        -->
        <div class="form-realtime-input-check_message" data-message="email"></div>

      </div>

    </form>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。 

sample/
├── index.html
├── style.css
└── script.js

index.html をブラウザで開くと、お名前とメールアドレスの入力内容をリアルタイムでチェックできます。メールアドレスは形式のみを確認する簡易チェックであり、実在するメールアドレスかどうかは判定しません。

コメント