入力内容を確認ボタンでチェックしてエラーを表示するテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力タイプ・ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

入力内容を確認ボタンでチェックしてエラーを表示するテキストフィールドを作る方法

入力内容を確認ボタンでチェックしてエラーを表示するテキストフィールドを作る方法を紹介します。このサンプルでは、お名前とメールアドレスの2つのテキストフィールドを用意し、「入力内容を確認」ボタンをクリックしたタイミングで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="textbox-validation-error_demo">

    <!-- タイトル -->
    <div class="textbox-validation-error_demo_title">
      入力内容を確認
    </div>

    <!-- 説明文 -->
    <p class="textbox-validation-error_demo_text">
      お名前とメールアドレスを入力して確認してください。
    </p>

    <!-- 入力項目全体 -->
    <div class="textbox-validation-error_demo_fields">

      <!-- お名前入力項目 -->
      <div
        class="textbox-validation-error_demo_group"
        id="textbox-validation-error-demo-name-group">

        <!-- お名前ラベル -->
        <label
          class="textbox-validation-error_demo_label"
          for="textbox-validation-error-demo-name">
          お名前
        </label>

        <!-- お名前入力欄 -->
        <input
          class="textbox-validation-error_demo_input"
          id="textbox-validation-error-demo-name"
          name="name"
          type="text"
          placeholder="例：山田 太郎"
          aria-describedby="textbox-validation-error-demo-name-message">

        <!-- お名前のエラーメッセージ -->
        <p
          class="textbox-validation-error_demo_message"
          id="textbox-validation-error-demo-name-message"
          aria-live="polite"></p>

      </div>

      <!-- メールアドレス入力項目 -->
      <div
        class="textbox-validation-error_demo_group"
        id="textbox-validation-error-demo-email-group">

        <!-- メールアドレスラベル -->
        <label
          class="textbox-validation-error_demo_label"
          for="textbox-validation-error-demo-email">
          メールアドレス
        </label>

        <!-- メールアドレス入力欄 -->
        <input
          class="textbox-validation-error_demo_input"
          id="textbox-validation-error-demo-email"
          name="email"
          type="email"
          inputmode="email"
          placeholder="例：sample@example.com"
          aria-describedby="textbox-validation-error-demo-email-message">

        <!-- メールアドレスのエラーメッセージ -->
        <p
          class="textbox-validation-error_demo_message"
          id="textbox-validation-error-demo-email-message"
          aria-live="polite"></p>

      </div>

    </div>

    <!-- 入力内容をチェックするボタン -->
    <button
      class="textbox-validation-error_demo_button"
      id="textbox-validation-error-demo-button"
      type="button">
      入力内容を確認
    </button>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* 入力内容確認フォーム全体 */
.textbox-validation-error_demo{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:520px; /* 最大横幅。値を大きくするとフォーム全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #dbe5f1; /* フォーム全体の枠線 */
  border-radius:18px; /* フォーム全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* フォーム全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* フォーム内のすべての要素 */
.textbox-validation-error_demo *{
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* タイトル */
.textbox-validation-error_demo_title{
  margin:0 0 10px; /* 下側10pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.textbox-validation-error_demo_text{
  margin:0 0 22px; /* 下側22pxの余白。値を大きくすると入力項目との間隔が広がる */
  color:#64748b; /* 説明文の文字色 */
  font-size:15px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* 入力項目全体 */
.textbox-validation-error_demo_fields{
  display:grid; /* 入力項目をグリッドで配置 */
  gap:16px; /* お名前とメールアドレスの間隔。値を大きくすると間隔が広がる */
}

/* 各入力項目 */
.textbox-validation-error_demo_group{
  width:100%; /* 親要素の横幅いっぱいに表示 */
}

/* ラベル */
.textbox-validation-error_demo_label{
  display:block; /* ラベルをブロック要素として表示 */
  margin-bottom:8px; /* 入力欄との間隔。値を大きくすると間隔が広がる */
  color:#111827; /* ラベルの文字色 */
  font-size:15px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
  line-height:1.5; /* ラベルの行間 */
}

/* 入力欄 */
.textbox-validation-error_demo_input{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:14px 16px; /* 上下14px・左右16px。値を大きくすると内側余白が広がる */
  border:1px solid #cbd5e1; /* 通常時の枠線 */
  border-radius:10px; /* 入力欄の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 入力欄の背景色 */
  color:#111827; /* 入力文字の色 */
  font-family:inherit; /* ページと同じフォントを使用 */
  font-size:16px; /* 入力文字のサイズ */
  line-height:1.5; /* 入力文字の行間 */
  outline:none; /* ブラウザ標準の外枠を非表示 */
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  /*
    0.3秒で枠線・背景色・影を切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* プレースホルダー */
.textbox-validation-error_demo_input::placeholder{
  color:#94a3b8; /* プレースホルダーの文字色 */
  opacity:1; /* プレースホルダーの不透明度 */
}

/* 入力欄のフォーカス時 */
.textbox-validation-error_demo_input:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  box-shadow:0 0 0 3px rgba(37,99,235,0.14); /* 3pxを変更すると外側の強調範囲が変わる */
}

/* エラー時の入力欄 */
.textbox-validation-error_demo_group.is-error
.textbox-validation-error_demo_input{
  border-color:#dc2626; /* エラー時の枠線色 */
  background:#fef2f2; /* エラー時の背景色 */
  box-shadow:0 0 0 3px rgba(220,38,38,0.12); /* 3pxを変更するとエラー時の強調範囲が変わる */
}

/* エラーメッセージ */
.textbox-validation-error_demo_message{
  min-height:20px; /* メッセージ表示領域の最小高さ */
  margin:6px 0 0; /* 入力欄との上側間隔。値を大きくすると間隔が広がる */
  color:#dc2626; /* エラーメッセージの文字色 */
  font-size:13px; /* エラーメッセージの文字サイズ */
  font-weight:700; /* エラーメッセージを太字にする */
  line-height:1.5; /* エラーメッセージの行間 */
}

/* 確認ボタン */
.textbox-validation-error_demo_button{
  display:block; /* ボタンをブロック要素として表示 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  min-height:48px; /* ボタンの最小高さ。値を大きくするとボタンが高くなる */
  margin:20px 0 0; /* 上側20pxの余白。値を大きくすると入力欄との間隔が広がる */
  padding:12px 18px; /* 上下12px・左右18px。値を大きくすると内側余白が広がる */
  border:0; /* ブラウザ標準の枠線を削除 */
  border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-family:inherit; /* ページと同じフォントを使用 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
}

/* 確認ボタンにマウスを重ねたとき */
.textbox-validation-error_demo_button:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* 確認ボタンのフォーカス時 */
.textbox-validation-error_demo_button:focus{
  outline:3px solid rgba(37,99,235,0.22); /* 3pxを変更するとフォーカス枠の太さが変わる */
  outline-offset:3px; /* 3pxを変更するとボタンとフォーカス枠の間隔が変わる */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* 入力内容確認フォーム全体 */
  .textbox-validation-error_demo{
    margin:24px auto; /* スマートフォンでは上下余白を24pxにする */
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

}

/* お名前入力欄を取得 */
const nameInput=document.getElementById(
  "textbox-validation-error-demo-name"
);

/* メールアドレス入力欄を取得 */
const emailInput=document.getElementById(
  "textbox-validation-error-demo-email"
);

/* 確認ボタンを取得 */
const button=document.getElementById(
  "textbox-validation-error-demo-button"
);

/* お名前入力項目を取得 */
const nameGroup=document.getElementById(
  "textbox-validation-error-demo-name-group"
);

/* メールアドレス入力項目を取得 */
const emailGroup=document.getElementById(
  "textbox-validation-error-demo-email-group"
);

/* お名前のエラーメッセージ表示欄を取得 */
const nameMessage=document.getElementById(
  "textbox-validation-error-demo-name-message"
);

/* メールアドレスのエラーメッセージ表示欄を取得 */
const emailMessage=document.getElementById(
  "textbox-validation-error-demo-email-message"
);

/* エラーを表示する */
const setError=(group,input,messageElement,message) => {

  /* 入力項目へエラー用クラスを追加 */
  group.classList.add("is-error");

  /* 入力欄がエラー状態であることを設定 */
  input.setAttribute("aria-invalid","true");

  /* エラーメッセージを表示 */
  messageElement.textContent=message;

};

/* エラー表示を解除する */
const clearError=(group,input,messageElement) => {

  /* エラー用クラスを削除 */
  group.classList.remove("is-error");

  /* aria-invalid属性を削除 */
  input.removeAttribute("aria-invalid");

  /* エラーメッセージを削除 */
  messageElement.textContent="";

};

/* お名前をチェックする */
const validateName=() => {

  /* 前後の空白を取り除いた入力値を取得 */
  const value=nameInput.value.trim();

  /* 未入力の場合 */
  if(value===""){

    setError(
      nameGroup,
      nameInput,
      nameMessage,
      "お名前を入力してください。"
    );

    return false;

  }

  /* 入力されている場合はエラーを解除 */
  clearError(
    nameGroup,
    nameInput,
    nameMessage
  );

  return true;

};

/* メールアドレスをチェックする */
const validateEmail=() => {

  /* 前後の空白を取り除いた入力値を取得 */
  const value=emailInput.value.trim();

  /* メールアドレスの簡易的な形式を確認する正規表現 */
  const emailPattern=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  /* 未入力の場合 */
  if(value===""){

    setError(
      emailGroup,
      emailInput,
      emailMessage,
      "メールアドレスを入力してください。"
    );

    return false;

  }

  /* メールアドレスの形式に一致しない場合 */
  if(!emailPattern.test(value)){

    setError(
      emailGroup,
      emailInput,
      emailMessage,
      "正しいメールアドレスを入力してください。"
    );

    return false;

  }

  /* 正しい形式の場合はエラーを解除 */
  clearError(
    emailGroup,
    emailInput,
    emailMessage
  );

  return true;

};

/* 確認ボタンを押したときに2つの入力欄をチェックする */
button.addEventListener("click",() => {

  validateName();
  validateEmail();

});

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

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

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「お名前」と「メールアドレス」の2つのテキストフィールドと「入力内容を確認」ボタン、エラーメッセージの表示欄を作成します。CSSでは通常時・フォーカス時・エラー時の入力欄や確認ボタンをデザインし、JavaScriptでは確認ボタンを押したタイミングで2つの入力内容をまとめてチェックします。入力中にリアルタイムで判定するのではなく、確認ボタンを押したときだけチェックする構成です。

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

各ファイルの役割
index.htmlは入力フォームの表示部分を構成するファイルです。「お名前」と「メールアドレス」の入力欄、それぞれのエラーメッセージ表示欄、「入力内容を確認」ボタンを配置しています。エラーメッセージ表示欄はaria-describedbyで対応する入力欄と関連付け、メッセージ部分にはaria-live="polite"を設定しています。同じ階層にあるstyle.cssとscript.jsもindex.htmlから読み込みます。

style.cssはフォーム全体、入力欄、エラーメッセージ、確認ボタンのデザインを設定するファイルです。通常時の入力欄は白背景ですが、エラーになった入力項目へis-errorクラスが追加されると、枠線を赤色、背景を薄い赤色へ変更します。確認ボタンにはホバー時とフォーカス時の表示も設定しています。

script.jsは入力内容をチェックするファイルです。確認ボタンのclickイベントからvalidateName()とvalidateEmail()を実行し、お名前とメールアドレスをそれぞれ判定します。エラーの場合はsetError()、条件を満たした場合はclearError()を実行して表示状態を切り替えます。

設置方法・使い方
sampleフォルダを作成し、その中へindex.html、style.css、script.jsを同じ階層で保存してください。保存後にsample/index.htmlをブラウザで開くと、index.htmlからstyle.cssとscript.jsが読み込まれます。お名前とメールアドレスを入力し、「入力内容を確認」ボタンを押すと、2つの入力欄がまとめてチェックされます。

お名前はnameInput.value.trim()で入力値の前後にある空白を取り除いてから判定します。結果が空文字の場合は未入力と判断し、「お名前を入力してください。」と表示します。このとき入力項目へis-errorクラスを追加し、入力欄へaria-invalid="true"を設定します。文字が1文字以上入力されている場合はエラーを解除します。文字数や文字の種類による判定は行っていません。

メールアドレスもtrim()で前後の空白を取り除きます。空文字の場合は「メールアドレスを入力してください。」と表示します。入力されている場合は/^[^\s@]+@[^\s@]+\.[^\s@]+$/で簡易的な形式を確認し、条件に一致しない場合は「正しいメールアドレスを入力してください。」と表示します。

この正規表現では、空白と@以外の文字が1文字以上、その後に@、さらに空白と@以外の文字が1文字以上、.、最後に空白と@以外の文字が1文字以上ある形式を確認します。例えばsample@example.comやabc@test.jpは条件に一致します。abc@、@test.com、abc@testなどは条件に一致しません。条件を満たした場合はエラーメッセージとエラー表示を解除します。この処理はメールアドレスが実際に存在するかどうかを確認するものではありません。

カスタマイズできる内容
index.htmlでは「入力内容を確認」のタイトル、説明文、「お名前」「メールアドレス」のラベル、プレースホルダー、確認ボタンの文字を変更できます。入力欄やIDを変更する場合は、script.jsで取得している要素との対応も合わせて変更してください。

style.cssではフォーム全体の横幅、余白、背景色、枠線、角丸、入力欄のデザイン、フォーカス時の表示、エラー時の背景色や枠線、確認ボタンの色やサイズなどを変更できます。

script.jsでは、お名前の未入力判定、メールアドレスの正規表現、エラー時に表示する文章を変更できます。現在は確認ボタンを押したときだけvalidateName()とvalidateEmail()を実行するため、入力中にはエラー判定を行いません。

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

margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。

padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

margin:0 0 22px;
説明文の下側余白です。22pxを大きくすると入力項目との間隔が広がります。

gap:16px;
お名前とメールアドレスの入力項目の間隔です。値を大きくすると2つの項目が離れます。

margin-bottom:8px;
ラベルと入力欄の間隔です。値を大きくするとラベルと入力欄が離れます。

padding:14px 16px;
入力欄の内側余白です。14pxが上下、16pxが左右です。値を大きくすると入力欄の内側に余裕ができます。

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

transition:0.3s;
入力欄の枠線・背景色・影が切り替わる時間です。値を大きくするとゆっくり、小さくすると速く変化します。

box-shadow:0 0 0 3px ...
フォーカス時とエラー時に入力欄の外側へ表示する強調範囲です。3pxを大きくすると強調表示が広がります。

min-height:20px;
エラーメッセージ表示欄の最小高さです。値を大きくするとメッセージ用に確保する高さが大きくなります。

margin:6px 0 0;
入力欄とエラーメッセージの間隔です。6pxを大きくすると間隔が広がります。

min-height:48px;
確認ボタンの最小高さです。値を大きくするとボタンが高くなります。

margin:20px 0 0;
確認ボタンの上側余白です。20pxを大きくすると入力項目との間隔が広がります。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。フォーム全体へwidth:100%とmax-width:520pxを設定しているため、広い画面では最大520pxで表示し、狭い画面では利用できる横幅に合わせて縮小します。さらに@media screen and (max-width:640px)を使用し、画面幅640px以下ではフォーム全体の上下余白を24px、内側余白を24px 18pxへ変更します。スマートフォン・タブレット・PCの画面幅に合わせて利用できます。