入力内容をチェックして成功メッセージを表示するテキストボックスを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

テキストボックス

入力内容をチェックして成功メッセージを表示するテキストボックスを作る方法

入力内容をチェックして成功メッセージを表示するテキストボックスを作る方法を紹介します。このサンプルでは、名前・電話番号・メールアドレスをJavaScriptで判定し、条件を満たした場合は緑色の成功メッセージを表示します。入力内容が正しくない場合はエラーメッセージも表示されるため、入力ミスを分かりやすく案内できます。

お問い合わせフォームや会員登録画面、申し込みフォームなどでは、入力内容が正しいことを利用者へ伝えることで安心して送信操作へ進めます。名前は未入力、電話番号は0から始まる番号、メールアドレスは一般的な形式かどうかを確認するため、実際のWebサイトでも利用しやすい構成です。

判定条件や表示メッセージは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="success-validation-textbox_wrap">

    <!-- タイトル -->
    <div class="success-validation-textbox_title">
      入力内容チェック
    </div>

    <!-- 説明文 -->
    <p class="success-validation-textbox_text">
      名前・電話番号・メールアドレスを入力して確認してください。
    </p>

    <!-- 入力フォーム -->
    <div class="success-validation-textbox_fields">

      <!-- 名前 -->
      <div
        class="success-validation-textbox_group"
        id="name-group">

        <label
          class="success-validation-textbox_label"
          for="name">
          お名前
        </label>

        <input
          class="success-validation-textbox_input"
          id="name"
          type="text"
          placeholder="例：山田 太郎">

        <p
          class="success-validation-textbox_message"
          id="name-message">
        </p>

      </div>

      <!-- 電話番号 -->
      <div
        class="success-validation-textbox_group"
        id="tel-group">

        <label
          class="success-validation-textbox_label"
          for="tel">
          電話番号
        </label>

        <input
          class="success-validation-textbox_input"
          id="tel"
          type="text"
          placeholder="例：090-1234-5678">

        <p
          class="success-validation-textbox_message"
          id="tel-message">
        </p>

      </div>

      <!-- メールアドレス -->
      <div
        class="success-validation-textbox_group"
        id="email-group">

        <label
          class="success-validation-textbox_label"
          for="email">
          メールアドレス
        </label>

        <input
          class="success-validation-textbox_input"
          id="email"
          type="text"
          placeholder="例：sample@example.com">

        <p
          class="success-validation-textbox_message"
          id="email-message">
        </p>

      </div>

    </div>

    <!-- 確認ボタン -->
    <button
      class="success-validation-textbox_button"
      type="button"
      id="check-button">
      入力内容を確認
    </button>

  </div>

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

</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで入力フォームを作成し、CSSで通常時・成功時・エラー時のデザインを設定します。JavaScriptでは名前・電話番号・メールアドレスを判定し、入力内容に応じて成功メッセージまたはエラーメッセージを表示します。 

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

各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。入力項目、プレースホルダー、ボタンの文字、ラベルなどを編集できます。

style.cssはフォームのデザインを設定するファイルです。入力欄やボタンの色、サイズ、余白、角丸、成功時・エラー時の表示色などを変更できます。

script.jsは入力内容を判定するファイルです。名前・電話番号・メールアドレスの入力条件や、表示する成功メッセージ・エラーメッセージを編集できます。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開き、名前・電話番号・メールアドレスを入力して「入力内容を確認」を押してください。入力内容が条件を満たしている項目は緑色で成功メッセージが表示され、条件を満たしていない項目は赤色のエラーメッセージが表示されます。

カスタマイズできる内容
index.htmlではラベル名、プレースホルダー、ボタンの文字を変更できます。style.cssでは入力欄やボタンの色、サイズ、角丸、余白、成功・エラー時の配色を変更できます。script.jsでは入力チェック条件や成功メッセージ、エラーメッセージの内容を用途に合わせて変更できます。

数値調整
style.css
max-width:760px;
フォーム全体の最大横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。

padding:40px;
フォーム全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

gap:24px;
各入力項目の間隔です。値を大きくすると項目同士が離れ、小さくすると間隔が狭くなります。

padding:14px 16px;
入力欄の内側余白です。上下の値を大きくすると入力欄が高くなります。

border-radius:10px;
入力欄やボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:17px;
入力文字やボタン文字の大きさです。値を変更すると文字サイズが変わります。

transition:0.3s;
色や影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

box-shadow:0 0 0 4px ...
成功時・エラー時に表示する外側の強調範囲です。4pxを変更すると強調表示の太さが変わります。

min-width:180px;
ボタンの最低横幅です。値を大きくするとボタンが横長になります。

min-height:50px;
ボタンの最低高さです。値を大きくすると押しやすいボタンになります。

script.js
/^0\d{9,10}$/
電話番号の判定です。先頭を0とし、その後ろを9〜10桁と判定するため、10桁または11桁の電話番号を許可します。

value.replace(/-/g,"")
ハイフンを除去してから判定します。090-1234-5678のような入力も利用できます。

/^[^\s@]+@[^\s@]+\.[^\s@]+$/
メールアドレス形式を判定する正規表現です。通常は変更せず、そのまま利用できます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に合わせて縮小表示されます。また、640px以下では余白や文字サイズを小さくし、確認ボタンは横幅いっぱいに表示されるため、スマートフォン・タブレット・PCで利用できます。

こちらもおすすめ

テキストボックス
テキストボックスのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント