テキストボックスに入力された内容をチェックし、条件に合っているかどうかを判定する方法を紹介します。未入力や入力形式の間違い、文字数の不足などをJavaScriptで確認し、判定結果に応じて入力欄の枠線とメッセージを切り替えます。
今回は、入力判定のタイミングを3種類紹介します。ボタンをクリックしたとき、文字を入力・削除するたびにリアルタイムで、入力欄からフォーカスが外れたときに、それぞれ未入力チェック、メールアドレスの形式チェック、5文字以上の文字数チェックを行います。条件を満たさない場合は赤色、条件を満たす場合は緑色で結果を表示します。
入力内容はJavaScriptで取得して判定するため、チェックする条件やタイミングを変更できます。また、取得した値は入力チェックだけでなく、ほかのJavaScriptの処理にも利用できます。
今回のデモでは、未入力・メールアドレスの形式・文字数の3つを判定条件として使用していますが、数字のみの入力や文字数の上限など、ほかにもさまざまな条件を設定できます。その他の判定条件や変更方法については、下記の「ファイル構成と設置方法」で一覧表とともに説明します。
デモ
名前を入力してチェックボタンを押すと、未入力かどうかを判定します。
判定条件：未入力・空白のみの場合はエラー
value.trim() !== ""
メールアドレスを入力・削除するたびに、入力形式を自動で判定します。
判定条件：メールアドレスの形式に一致しない場合はエラー
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
入力欄からフォーカスが外れたときに、入力された文字数を判定します。
判定条件：入力文字数が5文字未満の場合はエラー
value.length >= 5
3種類の入力チェックを試せます。①はボタンを押したとき、②は文字を入力・削除したとき、③は入力欄からフォーカスが外れたときに判定します。③の「フォーカス解除」ボタンは動作を確認するための補助ボタンで、入力欄以外の場所をクリックしても同じように判定されます。
すべての入力欄でコピー＆ペーストに対応しています。メールアドレスは、ブラウザに保存された自動入力候補を選択した場合もチェックできます。ただし、自動入力候補の表示や反映タイミングはブラウザの設定によって異なります。
今回は未入力・メールアドレスの形式・文字数の3つを例にしていますが、判定条件や判定タイミングは変更できます。その他の判定条件と変更方法は、下記の「ファイル構成と設置方法」で一覧表とともに紹介しています。
コードをコピーして使おう！
① ボタンクリックで入力判定
<!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-input-validation_container">
<label class="textbox-input-validation_label" for="textbox-input-validation-name">
名前
</label>
<input class="textbox-input-validation_input" id="textbox-input-validation-name" type="text" placeholder="名前を入力してください" autocomplete="off" aria-describedby="textbox-input-validation-name-message">
<!-- クリックすると入力内容を判定する -->
<button class="textbox-input-validation_button" id="textbox-input-validation-button" type="button">
入力内容をチェック
</button>
<!-- 判定結果のメッセージ -->
<p class="textbox-input-validation_message" id="textbox-input-validation-name-message" aria-live="polite"></p>
</div>
<!-- 未入力チェックのJavaScriptを読み込む -->
<script src="script.js"></script>
</body>
</html>② リアルタイムに入力判定
<!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-input-validation_container">
<label class="textbox-input-validation_label" for="textbox-input-validation-email">
メールアドレス
</label>
<!-- 自動入力候補とコピー＆ペーストにも対応 -->
<input class="textbox-input-validation_input" id="textbox-input-validation-email" type="text" inputmode="email" autocomplete="email" placeholder="例：sample@example.com" aria-describedby="textbox-input-validation-email-message">
<!-- 判定結果のメッセージ -->
<p class="textbox-input-validation_message" id="textbox-input-validation-email-message" aria-live="polite"></p>
</div>
<!-- メールアドレスの形式チェックのJavaScriptを読み込む -->
<script src="script.js"></script>
</body>
</html>③ フォーカス解除で入力判定
<!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>
<!-- 5文字以上かどうかを判定する入力欄 -->
<div class="textbox-input-validation_container">
<label class="textbox-input-validation_label" for="textbox-input-validation-text">
入力内容（5文字以上）
</label>
<input class="textbox-input-validation_input" id="textbox-input-validation-text" type="text" placeholder="5文字以上入力してください" autocomplete="off" aria-describedby="textbox-input-validation-text-message">
<!-- 判定結果のメッセージ -->
<p class="textbox-input-validation_message" id="textbox-input-validation-text-message" aria-live="polite"></p>
</div>
<!-- フォーカス解除時の文字数チェックのJavaScriptを読み込む -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回は、入力チェックを実行するタイミングが異なる3つのサンプルを用意しています。①は判定ボタンをクリックしたとき、②はメールアドレスの入力中、③は入力欄からフォーカスが外れたときに判定します。
それぞれHTML・CSS・JavaScriptで構成されており、必要なサンプルを個別にダウンロードして使用できます。3つをまとめて設置する必要はありません。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、テキストボックスや判定結果のメッセージを表示する要素を記述しています。①には判定ボタンも含まれています。style.cssでは、入力欄の枠線・余白・文字サイズに加え、正常時とエラー時の表示色を設定しています。script.jsでは、入力内容の取得、判定条件の確認、判定結果に応じた表示の切り替えを行っています。
設置方法・使い方
使用したいサンプルの「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開くと入力チェックを確認できます。
①は名前を入力して判定ボタンをクリックします。②はメールアドレスを入力・削除すると、その内容に合わせて判定結果がリアルタイムで更新されます。③は文字を入力したあと、入力欄の外側をクリックするかTabキーなどでフォーカスを移動すると判定されます。
入力した文字列を取得する方法
JavaScriptでは、document.getElementById()で入力欄を取得し、valueプロパティで入力内容を読み取ります。取得した値は文字列として扱われ、何も入力されていない場合は空文字列""になります。
例えば、①の名前入力欄では次のように取得できます。
// 名前の入力欄を取得する
const input = document.getElementById("textbox-input-validation-name");
// 現在の入力内容を文字列として取得する
const value = input.value;②のメールアドレスや③の文字数チェックでも、入力欄のIDを変更することで同じ方法を使用できます。取得した文字列を条件式で確認し、その結果をエラー表示などの処理に利用します。
入力チェックを実行するタイミング
3つのサンプルでは、判定条件だけでなく、JavaScriptで判定を実行するタイミングも異なります。
| サンプル | 実行タイミング | 使用するイベント |
|---|---|---|
| ① 名前の未入力チェック | 判定ボタンをクリックしたとき | click |
| ② メールアドレスの形式チェック | 入力中にリアルタイム判定 | input・change |
| ③ 文字数チェック | 入力欄からフォーカスが外れたとき | blur |
clickはボタンなどをクリックしたとき、inputは文字の入力・削除や貼り付けなどで値が変化したとき、blurは入力欄からフォーカスが外れたときに発生します。
②ではinputに加えてchangeも使用しています。changeは入力内容の変更が確定したときに発生するイベントで、ブラウザの自動入力なども考慮した補助的な判定に利用しています。
判定するタイミングを変更したい場合は、script.jsのaddEventListener()で指定しているイベントを確認してください。ただし、①のclickは判定ボタン、②のinput・changeと③のblurは入力欄に登録されています。イベントを変更する際は、登録先の要素も確認してください。
3つのサンプルで使用している判定条件
入力内容のチェックには、条件式を使用します。条件を満たした場合はtrue、満たさない場合はfalseになります。
今回の3つのサンプルでは、次の条件を使用しています。
| チェック内容 | 判定条件 | trueになる場合 |
|---|---|---|
| ① 未入力チェック | value.trim() !== "" |
空白以外の文字が入力されている |
| ② メール形式チェック | /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) |
指定したメール形式に一致している |
| ③ 文字数チェック | value.length >= 5 |
5文字以上入力されている |
①のtrim()は、文字列の先頭と末尾にある空白を取り除きます。そのため、半角スペースや全角スペースだけを入力した場合も未入力として判定できます。
②のtest()は、正規表現に文字列が一致するかを確認します。今回の条件では、@とその後のドットを含む基本的なメールアドレス形式を確認しています。ただし、この判定だけでメールアドレスが実在することや、すべての有効なメールアドレス形式に対応していることを保証するものではありません。
③のlengthは文字列の長さを取得します。5を10に変更すると、10文字以上の入力を求める条件になります。なお、JavaScriptのlengthはUTF-16コード単位で数えるため、一部の絵文字などは1文字に見えても2以上になる場合があります。
入力チェックに使用できる判定条件一覧
判定条件を変更すると、未入力・文字数・数値・特定の文字など、目的に合わせた入力チェックを作成できます。以下は、今回の3条件を含む代表的な判定式です。
表内のvalueには、input.valueで取得した文字列が入っているものとします。
| 判定内容 | JavaScriptの条件式 | trueになる条件 |
|---|---|---|
| 未入力ではない | value.trim() !== "" |
空白以外の文字がある |
| 未入力である | value.trim() === "" |
空欄または空白のみ |
| メール形式 | /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) |
指定したメール形式に一致する |
| 5文字以上 | value.length >= 5 |
5文字以上ある |
| 10文字以下 | value.length <= 10 |
10文字以下である |
| 5～10文字 | value.length >= 5 && value.length <= 10 |
5文字以上10文字以下 |
| 半角数字のみ | /^[0-9]+$/.test(value) |
半角数字が1文字以上ある |
| 半角英字のみ | /^[a-zA-Z]+$/.test(value) |
半角英字が1文字以上ある |
| 半角英数字のみ | /^[a-zA-Z0-9]+$/.test(value) |
半角英数字が1文字以上ある |
| ひらがなのみ | /^[ぁ-ゖー]+$/.test(value) |
指定したひらがなと長音記号だけで構成されている |
| カタカナのみ | /^[ァ-ヺー]+$/.test(value) |
指定したカタカナと長音記号だけで構成されている |
| 特定の文字を含む | value.includes("東京") |
「東京」が含まれている |
| 特定の文字と一致 | value === "東京" |
入力内容が「東京」と完全に一致する |
| 先頭の文字を確認 | value.startsWith("A") |
「A」で始まる |
| 末尾の文字を確認 | value.endsWith("円") |
「円」で終わる |
正規表現の^は文字列の先頭、$は末尾を表します。+は直前の文字や文字の範囲が1回以上続くことを意味します。
例えば、半角数字だけを許可したい場合は/^[0-9]+$/を使用します。数字以外の文字が混ざっている場合や、何も入力されていない場合はfalseになります。
表の判定式は用途に合わせた基本例です。ひらがな・カタカナの判定では、空白や一部の記号などを許可していないため、必要に応じて対象文字を追加してください。
判定条件を変更する方法
判定条件は、各サンプルのscript.jsにあるconst isValidの条件式で変更できます。
例えば、①の未入力チェックを「前後の空白を除いて3文字以上入力されているか」に変更する場合は、次のように書き換えます。
// 変更前：空白以外の文字が入力されているか確認する
const isValid = value.trim() !== "";
// 変更後：前後の空白を除いて3文字以上あるか確認する
const isValid = value.trim().length >= 3;
isValidには判定結果のtrueまたはfalseが入ります。上記は変更前と変更後を示した例であり、実際にはscript.js内の条件式を1つだけ記述します。
条件を変更した場合は、正常時・エラー時に表示するメッセージも変更後の条件に合わせて修正してください。①では、条件を満たさない場合のmessage.textContent = "名前を入力してください。";などが変更箇所になります。
複数の判定条件を組み合わせる方法
2つ以上の条件を指定したい場合は、&&（AND）または||（OR）を使用します。
&&はすべての条件を満たした場合、||はどれか1つでも条件を満たした場合にtrueになります。
// 5文字以上かつ10文字以下
const isValid = value.length >= 5 && value.length <= 10;
// 「東京」または「大阪」と一致
const isValid = value === "東京" || value === "大阪";
// 5文字以上10文字以下で、半角英数字のみ
const isValid = value.length >= 5 && value.length <= 10 && /^[a-zA-Z0-9]+$/.test(value);
1つ目は文字数が5～10文字の場合、2つ目は「東京」または「大阪」と完全に一致する場合、3つ目は文字数と文字種のすべての条件を満たした場合にtrueになります。
上記はそれぞれ独立した記述例です。実際には使用したい条件式を1つ選び、script.jsのconst isValidを書き換えてください。異なる条件を組み合わせる場合は、必要に応じて()で条件をまとめることもできます。
判定結果を利用する方法
判定結果は、正常時とエラー時の表示を切り替えるだけでなく、送信ボタンの有効・無効を制御する処理にも利用できます。
例えば、判定結果がisValidに入っており、送信ボタンの要素をsubmitButtonとして取得している場合は、次のように指定できます。
// 判定結果に応じて送信ボタンの有効・無効を切り替える
submitButton.disabled = !isValid;
isValidがtrueの場合はdisabledがfalseとなり、ボタンを押せる状態になります。反対に、isValidがfalseの場合はdisabledがtrueとなり、ボタンを押せなくなります。
このコードは判定結果の応用例です。今回の3つのサンプルには送信ボタンの制御や送信処理は含まれていません。実際のフォームでは、送信時にも入力内容を再確認し、必要に応じてサーバー側でも検証してください。
エラー表示とデザインの調整
style.cssでは、判定結果に応じて入力欄の枠線とメッセージの色を変更しています。JavaScriptでis-errorまたはis-successクラスを追加することで、エラー時は赤色、正常時は緑色に切り替わります。
入力欄の色は.textbox-input-validation_input.is-errorと.textbox-input-validation_input.is-successで設定しています。エラー時の枠線色は#dc2626、正常時は#16a34aです。外側の影はbox-shadowで設定しており、3pxを変更すると影の広がりを調整できます。
判定メッセージの文字色は.textbox-input-validation_message.is-errorと.textbox-input-validation_message.is-successで変更できます。現在はエラー時が#dc2626、正常時が#15803dです。
/* エラー時の入力欄 */
.textbox-input-validation_input.is-error,
.textbox-input-validation_input.is-error:focus {
border-color: #dc2626; /* エラー時の枠線色 */
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); /* 赤い影。3pxで広がりを調整 */
}
/* 正常時の入力欄 */
.textbox-input-validation_input.is-success,
.textbox-input-validation_input.is-success:focus {
border-color: #16a34a; /* 正常時の枠線色 */
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1); /* 緑色の影。3pxで広がりを調整 */
}
/* エラーメッセージ */
.textbox-input-validation_message.is-error {
color: #dc2626; /* エラー時の文字色 */
}
/* 正常メッセージ */
.textbox-input-validation_message.is-success {
color: #15803d; /* 正常時の文字色 */
}
入力欄とボタンのサイズ調整
入力欄全体の最大横幅は.textbox-input-validation_containerのmax-width: 680px;で設定しています。例えば800pxにすると横幅が広がり、500pxにするとコンパクトになります。
全体の内側余白はpadding: 36px;、角丸はborder-radius: 18px;です。テキストボックス自体の余白は.textbox-input-validation_inputのpadding: 16px;、角丸はborder-radius: 12px;で調整できます。
①のチェックボタンは.textbox-input-validation_buttonで設定しています。min-height: 46px;で最小の高さ、padding: 12px 26px;で上下・左右の余白、margin-top: 20px;で入力欄との間隔を調整できます。背景色は#2563eb、角丸は10pxです。
②と③にはチェックボタンがないため、ボタンに関するCSSは含まれていません。
レスポンシブ対応
3つのサンプルでは、@media (max-width: 640px)を使用して、画面幅が640px以下になったときに余白を調整しています。
通常は全体の上下余白を40px、内側余白を36px、入力欄の内側余白を16pxに設定しています。画面幅640px以下では、全体の上下余白を24px、内側余白を上下24px・左右18px、入力欄の内側余白を14pxに変更しています。
また、①のチェックボタンにはwidth: 100%;を指定し、画面幅640px以下では横幅いっぱいに表示します。②と③にはボタンがないため、この設定はありません。
/* =========================================
スマートフォン対応
========================================= */
@media (max-width: 640px) {
/* 画面幅640px以下では全体の余白を小さくする */
.textbox-input-validation_container {
margin: 24px auto; /* 上下の余白を24pxに変更 */
padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
}
/* スマートフォンで入力欄の余白を調整 */
.textbox-input-validation_input {
padding: 14px; /* 内側の余白を14pxに変更 */
}
/* ①のチェックボタンのみ */
.textbox-input-validation_button {
width: 100%; /* 親要素の横幅いっぱいに表示 */
}
}
画面幅の切り替え位置を変更したい場合は、640pxの数値を調整してください。例えば768pxにすると、画面幅768px以下で調整後のスタイルが適用されます。
上記のCSSは①のボタン設定も含めた説明例です。②と③のstyle.cssには.textbox-input-validation_buttonの設定は不要です。余白や横幅を変更した場合は、PCとスマートフォンの両方で入力欄と判定メッセージの表示を確認してください。
コメント