入力内容をチェックしてエラーを表示するテキストボックスを作る方法
入力内容をJavaScriptでチェックし、未入力の場合にエラーメッセージを表示するテキストボックスを作る方法を紹介します。「確認する」ボタンをクリックすると入力欄の内容を判定し、何も入力されていない場合は枠線と背景色を赤色へ変更して、「お名前を入力してください。」という案内を表示します。
エラーがある入力欄を視覚的に強調できるため、ユーザーが修正すべき場所をすぐに確認できます。お問い合わせ画面、会員登録画面、ECサイトの注文者情報、会員サイトのプロフィール編集、管理画面の入力フォームなど、入力漏れを防ぎたい場面で利用できます。正しく文字が入力されている場合は、表示中のエラー状態を解除します。
サンプルはHTML・CSS・JavaScriptの3ファイルで構成し、外部ライブラリを使用せずに動作します。HTMLではラベルや入力欄、エラーメッセージを変更でき、CSSではエラー時の枠線色・背景色・文字色・余白・角丸を調整できます。JavaScriptでは未入力を判定する条件を確認でき、スマートフォン・タブレット・PCでも利用しやすいレイアウトです。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
お客様情報を入力
名前・電話番号・メールアドレスを入力し、「入力内容を確認」を押してください。
名前は未入力、電話番号は0から始まる10桁または11桁以外、メールアドレスは形式が正しくない場合にエラーを表示します。入力内容を修正するとエラー表示は解除されます。
コードをコピーして使おう！
<!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_wrap">
<!-- タイトル -->
<div class="textbox-validation-error_title">
入力内容チェック
</div>
<!-- 説明文 -->
<p class="textbox-validation-error_text">
名前・電話番号・メールアドレスを入力し、「入力内容を確認」を押してください。
</p>
<!-- 入力フォーム -->
<div class="textbox-validation-error_fields">
<!-- 名前 -->
<div
class="textbox-validation-error_group"
id="name-group">
<label
class="textbox-validation-error_label"
for="name">
お名前
</label>
<input
class="textbox-validation-error_input"
id="name"
type="text"
placeholder="例：山田 太郎">
<p
class="textbox-validation-error_message"
id="name-message">
</p>
</div>
<!-- 電話番号 -->
<div
class="textbox-validation-error_group"
id="tel-group">
<label
class="textbox-validation-error_label"
for="tel">
電話番号
</label>
<input
class="textbox-validation-error_input"
id="tel"
type="tel"
placeholder="例：090-1234-5678">
<p
class="textbox-validation-error_message"
id="tel-message">
</p>
</div>
<!-- メールアドレス -->
<div
class="textbox-validation-error_group"
id="email-group">
<label
class="textbox-validation-error_label"
for="email">
メールアドレス
</label>
<input
class="textbox-validation-error_input"
id="email"
type="email"
placeholder="例：sample@example.com">
<p
class="textbox-validation-error_message"
id="email-message">
</p>
</div>
</div>
<!-- 確認ボタン -->
<button
class="textbox-validation-error_button"
type="button"
id="check-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_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小 */
max-width:760px; /* 最大横幅。900pxにすると広く、600pxにするとコンパクトになる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:40px; /* 内側余白。48pxにすると広く、24pxにすると狭くなる */
border:1px solid #dbe5f1; /* 全体を囲む枠線の太さ・種類・色 */
border-radius:20px; /* 全体の角丸。30pxにすると丸く、0にすると四角くなる */
background:#f8fbff; /* 全体の背景色 */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
}
/* タイトル */
.textbox-validation-error_title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
color:#111827; /* タイトルの文字色 */
font-size:32px; /* タイトルの文字サイズ。38pxにすると大きく、26pxにすると小さくなる */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
text-align:center; /* タイトルを中央揃えにする */
}
/* 説明文 */
.textbox-validation-error_text{
margin:0 0 34px; /* 下側34pxの余白。値を大きくすると入力欄との間隔が広がる */
color:#64748b; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ。18pxにすると大きくなる */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
text-align:center; /* 説明文を中央揃えにする */
}
/* 入力項目一覧 */
.textbox-validation-error_fields{
display:grid; /* 入力項目を縦方向へ並べる */
gap:22px; /* 入力項目同士の間隔。30pxにすると広く、14pxにすると狭くなる */
}
/* 各入力項目 */
.textbox-validation-error_group{
width:100%; /* 親要素の横幅いっぱいに表示 */
}
/* ラベル */
.textbox-validation-error_label{
display:block; /* ラベルを1行で表示 */
margin-bottom:10px; /* 下側10pxの余白。値を大きくすると入力欄との間隔が広がる */
color:#111827; /* ラベルの文字色 */
font-size:16px; /* ラベルの文字サイズ。18pxにすると大きくなる */
font-weight:700; /* ラベルを太字にする */
line-height:1.5; /* ラベルの行間 */
}
/* テキストボックス */
.textbox-validation-error_input{
width:100%; /* 親要素の横幅いっぱいに表示 */
padding:14px 16px; /* 上下14px・左右16px。上下を大きくすると入力欄が高くなる */
border:2px solid #cbd5e1; /* 通常時の枠線。2pxを大きくすると枠線が太くなる */
border-radius:10px; /* 入力欄の角丸。20pxにすると丸く、0にすると四角くなる */
background:#ffffff; /* 入力欄の背景色 */
color:#111827; /* 入力文字の色 */
font-family:inherit; /* ページ全体と同じフォントを使用 */
font-size:16px; /* 入力文字のサイズ。18pxにすると大きく、14pxにすると小さくなる */
line-height:1.5; /* 入力文字の行間 */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
outline:none; /* ブラウザ標準の外枠を非表示 */
transition:
border-color 0.3s ease,
background-color 0.3s ease,
box-shadow 0.3s ease;
/*
0.3秒で枠線・背景色・影を切り替える。
0.6sにするとゆっくり、0.1sにすると速くなる。
3か所の0.3sを同じ値へ変更する。
*/
}
/* プレースホルダー */
.textbox-validation-error_input::placeholder{
color:#94a3b8; /* プレースホルダーの文字色 */
opacity:1; /* ブラウザごとの透明度差をなくす */
}
/* 入力欄をクリックした状態 */
.textbox-validation-error_input:focus{
border-color:#2563eb; /* フォーカス時の枠線色 */
box-shadow:0 0 0 4px rgba(37,99,235,0.14); /* 外側へ4pxの強調表示。4pxを大きくすると範囲が広がる */
}
/* エラー状態の入力欄 */
.textbox-validation-error_group.is-error
.textbox-validation-error_input{
border-color:#dc2626; /* エラー時の枠線色 */
background:#fef2f2; /* エラー時の背景色 */
box-shadow:0 0 0 4px rgba(220,38,38,0.12); /* エラー時の外側強調。4pxを大きくすると範囲が広がる */
}
/* エラーメッセージ */
.textbox-validation-error_message{
display:none; /* 通常時はエラーメッセージを非表示 */
margin:8px 0 0; /* 上側8pxの余白。値を大きくすると入力欄との間隔が広がる */
color:#dc2626; /* エラーメッセージの文字色 */
font-size:14px; /* エラーメッセージの文字サイズ。16pxにすると大きくなる */
font-weight:700; /* エラーメッセージを太字にする */
line-height:1.6; /* エラーメッセージの行間 */
}
/* エラー状態のメッセージ */
.textbox-validation-error_group.is-error
.textbox-validation-error_message{
display:block; /* エラー時にメッセージを表示 */
}
/* 入力内容を確認するボタン */
.textbox-validation-error_button{
display:block; /* ボタンをブロック要素として表示 */
min-width:160px; /* ボタンの最低横幅。200pxにすると広くなる */
min-height:48px; /* ボタンの最低高さ。56pxにすると高くなる */
margin:30px auto 0; /* 上側30pxの余白を付けて左右中央へ配置 */
padding:12px 24px; /* 上下12px・左右24px。値を大きくするとボタンが大きくなる */
border:none; /* ボタンの枠線を非表示 */
border-radius:10px; /* ボタンの角丸。20pxにすると丸く、0にすると四角くなる */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-family:inherit; /* ページ全体と同じフォントを使用 */
font-size:16px; /* ボタン文字のサイズ。18pxにすると大きくなる */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:background-color 0.3s ease; /* 0.3秒で背景色を変化。0.6sにするとゆっくり、0.1sにすると速くなる */
}
/* ボタンへマウスを重ねた状態 */
.textbox-validation-error_button:hover{
background:#1d4ed8; /* マウスを重ねた時の背景色 */
}
/* ボタンへフォーカスした状態 */
.textbox-validation-error_button:focus{
outline:3px solid rgba(37,99,235,0.22); /* 外側の強調表示。3pxを大きくすると太くなる */
outline-offset:3px; /* ボタンと外枠の間隔。値を大きくすると外側へ離れる */
}
/* 画面幅640px以下 */
@media screen and (max-width:640px){
/* スマートフォン表示時のページ全体 */
body{
padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
}
/* スマートフォン表示時の全体 */
.textbox-validation-error_wrap{
margin:24px auto; /* 上下余白を24pxへ縮小 */
padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
}
/* スマートフォン表示時のタイトル */
.textbox-validation-error_title{
font-size:25px; /* タイトルの文字サイズを25pxへ縮小 */
}
/* スマートフォン表示時の入力項目一覧 */
.textbox-validation-error_fields{
gap:18px; /* 入力項目同士の間隔を18pxへ縮小 */
}
/* スマートフォン表示時の入力欄 */
.textbox-validation-error_input{
padding:13px 14px; /* 上下13px・左右14pxへ縮小 */
}
/* スマートフォン表示時のボタン */
.textbox-validation-error_button{
width:100%; /* ボタンを横幅いっぱいに表示 */
}
}
// 名前入力欄
const nameInput=document.getElementById("name");
// 電話番号入力欄
const telInput=document.getElementById("tel");
// メールアドレス入力欄
const emailInput=document.getElementById("email");
// 確認ボタン
const checkButton=document.getElementById("check-button");
// 名前エリア
const nameGroup=document.getElementById("name-group");
// 電話番号エリア
const telGroup=document.getElementById("tel-group");
// メールアドレスエリア
const emailGroup=document.getElementById("email-group");
// 名前エラーメッセージ
const nameMessage=document.getElementById("name-message");
// 電話番号エラーメッセージ
const telMessage=document.getElementById("tel-message");
// メールアドレスエラーメッセージ
const emailMessage=document.getElementById("email-message");
// エラー表示
function setError(group,input,messageElement,message){
// エラー用クラスを追加
group.classList.add("is-error");
// 入力欄へエラー状態を設定
input.setAttribute("aria-invalid","true");
// エラーメッセージを表示
messageElement.textContent=message;
}
// エラー解除
function clearError(group,input,messageElement){
// エラー用クラスを削除
group.classList.remove("is-error");
// エラー状態を解除
input.removeAttribute("aria-invalid");
// メッセージを空にする
messageElement.textContent="";
}
// 名前をチェック
function validateName(){
// 前後の空白を削除
const value=nameInput.value.trim();
// 未入力ならエラー
if(value===""){
setError(
nameGroup,
nameInput,
nameMessage,
"お名前を入力してください。"
);
return false;
}
// エラー解除
clearError(
nameGroup,
nameInput,
nameMessage
);
return true;
}
// 電話番号をチェック
function validateTel(){
// 前後の空白を削除
const value=telInput.value.trim();
// ハイフンを削除
const phone=value.replace(/-/g,"");
// 日本の電話番号
// 0から始まり10桁または11桁
const phonePattern=/^0\d{9,10}$/;
// 未入力ならエラー
if(value===""){
setError(
telGroup,
telInput,
telMessage,
"電話番号を入力してください。"
);
return false;
}
// 電話番号形式ではない場合
if(!phonePattern.test(phone)){
setError(
telGroup,
telInput,
telMessage,
"正しい電話番号を入力してください。"
);
return false;
}
// エラー解除
clearError(
telGroup,
telInput,
telMessage
);
return true;
}
// メールアドレスをチェック
function 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;
}
// 確認ボタンをクリックした時
checkButton.addEventListener("click",function(){
// 名前をチェック
validateName();
// 電話番号をチェック
validateTel();
// メールアドレスをチェック
validateEmail();
});
// 名前入力中
nameInput.addEventListener("input",function(){
// 入力中に再チェック
validateName();
});
// 電話番号入力中
telInput.addEventListener("input",function(){
// 入力中に再チェック
validateTel();
});
// メールアドレス入力中
emailInput.addEventListener("input",function(){
// 入力中に再チェック
validateEmail();
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで名前・電話番号・メールアドレスの入力欄と確認ボタンを配置し、CSSで通常時とエラー時のデザインを設定します。JavaScriptでは各入力内容を判定し、条件に合わない場合にエラーメッセージを表示します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは入力フォームの構造を作成するファイルです。名前・電話番号・メールアドレスのラベル、入力欄、プレースホルダー、エラーメッセージの表示位置、確認ボタンの文字を編集できます。
style.cssは入力フォームの見た目を設定するファイルです。入力欄の横幅、余白、枠線、角丸、文字サイズ、ボタンの色、エラー時の赤い枠線や背景色を変更できます。
script.jsは入力内容を判定するファイルです。名前は未入力かどうか、電話番号は0から始まる10桁または11桁かどうか、メールアドレスは指定した形式に一致しているかを確認します。
設置方法・使い方
sampleフォルダ内へindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開き、名前・電話番号・メールアドレスを入力して「入力内容を確認」ボタンを押します。入力内容に問題がある項目だけ赤色で強調され、入力欄の下へエラーメッセージが表示されます。内容を修正すると入力中に再判定され、正しい状態になった項目のエラー表示が解除されます。
カスタマイズできる内容
index.htmlでは入力項目名、プレースホルダー、確認ボタンの文字を変更できます。style.cssでは通常時とエラー時の枠線色、背景色、文字色、入力欄の高さ、余白、角丸、ボタンサイズを変更できます。script.jsでは各エラーメッセージと電話番号・メールアドレスの判定条件を変更できます。
数値調整
style.css
max-width:760px;
フォーム全体の最大横幅です。900pxへ変更すると横に広くなり、600pxへ変更するとコンパクトになります。
padding:40px;
フォーム全体の内側余白です。60pxへ変更すると内容と外枠の間隔が広くなり、24pxへ変更すると狭くなります。
gap:22px;
名前・電話番号・メールアドレスの入力項目同士の間隔です。32pxへ変更すると広くなり、14pxへ変更すると詰まって表示されます。
padding:14px 16px;
入力欄の上下・左右の内側余白です。18px 20pxへ変更すると入力欄が高くなり、10px 12pxへ変更すると低くなります。
border:2px solid #cbd5e1;
入力欄の通常時の枠線です。2pxを3pxへ変更すると枠線が太くなり、1pxへ変更すると細くなります。
border-radius:10px;
入力欄の角丸です。20pxへ変更すると丸みが強くなり、0へ変更すると四角くなります。
font-size:16px;
入力文字の大きさです。18pxへ変更すると大きくなり、14pxへ変更すると小さくなります。
box-shadow:0 0 0 4px rgba(220,38,38,0.12);
エラー時に入力欄の外側へ表示する赤い強調範囲です。4pxを6pxへ変更すると広がり、2pxへ変更すると控えめになります。
transition:border-color 0.3s ease;
枠線色が切り替わる時間です。0.6sへ変更するとゆっくり変化し、0.1sへ変更すると素早く変化します。背景色と影にも同じ0.3sが設定されているため、3か所を同じ値へ変更します。
min-width:160px;
確認ボタンの最低横幅です。220pxへ変更すると広くなり、120pxへ変更すると狭くなります。
min-height:48px;
確認ボタンの最低高さです。56pxへ変更すると高くなり、40pxへ変更すると低くなります。
script.js
const phonePattern=/^0\d{9,10}$/;
電話番号の桁数を判定する部分です。{9,10}は、先頭の0を除いて9桁または10桁を許可するため、電話番号全体では10桁または11桁になります。
const emailPattern=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
メールアドレス形式を判定する部分です。数値調整を行う箇所ではないため、形式を変更する必要がない場合はそのまま使用します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxによって画面幅に合わせて縮小します。画面幅が640px以下になると、フォーム全体の余白を24px 18px、入力欄の余白を13px 14pxへ縮小し、確認ボタンをwidth:100%で横幅いっぱいに表示します。スマートフォン・タブレット・PCで利用できます。
コメント