JavaScriptでリアルタイムに入力チェックする7つの方法

●JavaScriptでリアルタイム入力チェックとは？
- ○リアルタイム入力チェックの重要性
- ○JavaScriptを使う利点
●半角英数字のみの入力制限
●数字のみの入力制限
●入力文字数の制限
●よくあるエラーと対処法
●リアルタイム入力チェックの応用例
まとめ

※Japanシーモアは、利用目的を問わず掲載されているコードの再利用が可能です。常に解説内容のわかりやすさや記事の品質に注力しておりますので、不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptでリアルタイム入力チェックとは？

ユーザーがフォームに入力した内容をリアルタイムにチェックし、エラーや不備があればすぐに知らせることができたら素晴らしいと思いませんか？

JavaScriptを使えば、そんなリアルタイム入力チェックを実現できるんです。

○リアルタイム入力チェックの重要性

ユーザーがフォームに入力している最中に、その内容をチェックしてフィードバックを返すリアルタイム入力チェック。

これは、ユーザーエクスペリエンスを大きく向上させる重要な機能です。

入力内容に不備があれば、リアルタイムにエラーメッセージを表示。

ユーザーは自分のミスにすぐ気づくことができ、無駄な時間を費やさずに済みます。

逆に、正しく入力できていれば、安心感を与えることもできるでしょう。

また、サーバーへのフォーム送信前にエラーをキャッチできるので、無駄なサーバー負荷を防ぐことにもつながります。

リアルタイム入力チェックは、ユーザー体験と、サーバーの効率化の両方に寄与する、とても重要な機能なのです。

○JavaScriptを使う利点

そんなリアルタイム入力チェックを実現するのに、JavaScriptはうってつけの言語だと言えます。

JavaScriptは、フォームの入力内容を動的に取得し、チェックするのに必要十分な機能を備えています。

例えば、正規表現を使えば特定のパターンにマッチするかをチェックできますし、if文などの条件分岐を駆使すれば、より複雑な入力チェックも可能です。

エラーメッセージの表示も、DOMを操作すればお手の物。JavaScriptは、リアルタイム入力チェックを実装するのに非常に適しているのです。

しかも、JavaScriptはフロントエンドで動作するので、サーバーとの通信なしにチェックが完結します。

レスポンスが早く、ユーザーストレスを最小限に抑えられるのも大きなメリットと言えるでしょう。

●半角英数字のみの入力制限

フォームの入力欄で、半角英数字以外の入力を制限したいというニーズは結構多いと思います。

例えば、ユーザーIDやクーポンコードの入力欄などでは、半角英数字のみを許可したいケースがよくありますよね。

JavaScriptを使えば、そんな半角英数字のみの入力制限もお手軽に実装できちゃいます。

正規表現と組み合わせることで、パワフルな入力チェックが可能になるんです。

○正規表現を使った半角英数字チェック

正規表現は、文字列のパターンを定義するための方法の1つ。

JavaScriptでは、正規表現を使って文字列をチェックすることができます。

例えば、半角英数字のみを許可する正規表現パターンは/^[A-Za-z0-9]*$/となります。

この正規表現を使えば、入力された文字列が半角英数字のみで構成されているかをチェックできるんです。

○サンプルコード1：半角英数字のみ許可

それでは実際に、正規表現を使って半角英数字のみを許可する入力チェックのサンプルコードを見てみましょう。

function validateAlphanumeric(input) {
  const regex = /^[A-Za-z0-9]*$/;
  if (!regex.test(input)) {
    alert("半角英数字のみ入力可能です。");
    return false;
  }
  return true;
}

このコードでは、validateAlphanumeric関数に入力された文字列inputが、正規表現パターン/^[A-Za-z0-9]*$/にマッチするかをチェックしています。

マッチしない場合は、アラートで「半角英数字のみ入力可能です。」と表示し、falseを返します。

こんな感じで、正規表現を使えばシンプルに半角英数字のみの入力チェックが実装できるわけです。

○キー入力イベントを使った制限

ただ、先ほどのコードだと、入力が確定された後にしかチェックができません。

リアルタイムに入力をチェックして、半角英数字以外の入力を制限したい場合はどうすればいいのでしょうか？

そんな時は、キー入力イベントを使うのが有効です。

具体的には、keypressイベントを監視して、入力された文字が半角英数字以外だった場合はイベントをキャンセルする、という方法です。

○サンプルコード2：キー入力時の半角英数字制限

では早速、キー入力イベントを使って半角英数字のみを許可する入力制限のサンプルコードを見てみましょう。

document.getElementById("myInput").addEventListener("keypress", function(e) {
  const keyCode = e.keyCode || e.which;
  const keyChar = String.fromCharCode(keyCode);
  const regex = /[A-Za-z0-9]/;
  if (!regex.test(keyChar)) {
    e.preventDefault();
    return false;
  }
});

このコードでは、idがmyInputの要素に対してkeypressイベントリスナーを設定しています。

入力されたキーの文字が正規表現パターン/[A-Za-z0-9]/にマッチしない場合は、e.preventDefault()でイベントをキャンセルすることで、半角英数字以外の入力を制限しているわけです。

●数字のみの入力制限

半角英数字の入力制限ができたところで、今度は数字のみの入力制限にチャレンジしてみましょう。

年齢や金額、個数など、数値データの入力が必要なシーンは結構多いですよね。

そんな時に、数字以外の入力を制限できれば、データの整合性を保つのにとても役立ちます。

数字のみの入力制限も、正規表現を使えばスムーズに実装できちゃいます。

ちょっとややこしいですが、一緒に見ていきましょう。

○正規表現による数字のみチェック

数字のみを許可する正規表現パターンは/^[0-9]*$/となります。

この正規表現を使えば、入力された文字列が数字のみで構成されているかをチェックできるわけです。

○サンプルコード3：数字のみ許可

それでは実際に、正規表現を使って数字のみを許可する入力チェックのサンプルコードを見てみましょう。

function validateNumeric(input) {
  const regex = /^[0-9]*$/;
  if (!regex.test(input)) {
    alert("数字のみ入力可能です。");
    return false;
  }
  return true;
}

このコードは、validateNumeric関数に入力された文字列inputが、正規表現パターン/^[0-9]*$/にマッチするかをチェックしています。

マッチしない場合は、アラートで「数字のみ入力可能です。」と表示し、falseを返します。

例えば、次のようなHTMLがあったとします。

<input type="text" id="ageInput" onblur="validateNumeric(this.value)">

この入力欄では、フォーカスを外した時（onblur）にvalidateNumeric関数が呼び出され、数字のみの入力チェックが行われます。

数字以外が入力されていた場合は、アラートが表示されるというわけです。

○ステップ式の数字入力

ところで、数字の入力欄では、ステップ式の入力が便利な場合もありますよね。

例えば、年齢の入力欄で、1つずつ数値を増減できるようにしておけば、ユーザーの利便性が高まります。

そんなステップ式の数字入力も、HTMLのinput要素のtype属性をnumberにすることで簡単に実現できます。

○サンプルコード4：ステップ式数字入力

では早速、ステップ式の数字入力のサンプルコードを見てみましょう。

<input type="number" id="ageInput" min="0" max="120" step="1">

このコードでは、type="number"とすることで、ステップ式の数字入力欄を作成しています。

min属性で最小値、max属性で最大値、step属性で増減ステップ幅を指定できます。

この例だと、0から120までの数値を、1ずつ増減できる入力欄になります。

ユーザーはスピンボタン（上下の矢印ボタン）を使って、簡単に数値を調整できるわけです。

ただ、この方法には1つ注意点があります。

type="number"では、スピンボタンを使わずに直接入力した場合、数字以外の入力を完全に制限することはできないんです。

ですから、サーバーサイドでも必ずバリデーションを行う必要があります。

フロントエンドの入力チェックはあくまでユーザーの利便性を高めるための機能だと、肝に銘じておきましょう。

●入力文字数の制限

ここまでは、入力可能な文字種（半角英数字や数字のみ）の制限方法を見てきましたが、入力文字数を制限したいこともありますよね。

例えば、ユーザー名やコメント欄など、あまり長すぎても困ってしまう入力欄があったりします。

そんな時は、HTMLのmaxlength属性を使うのが手っ取り早い方法です。

でも、JavaScriptを使えば、もっと柔軟に文字数制限ができるんです。

一緒に見ていきましょう。

○maxlengthを使った文字数制限

HTMLのmaxlength属性を使えば、入力可能な最大文字数を指定できます。

これを使うだけでも、簡単に文字数制限ができちゃいます。

○サンプルコード5：maxlengthによる制限

例えば、次のようなHTMLがあったとします。

<input type="text" id="nameInput" maxlength="10">

この入力欄では、maxlength="10"と指定されているので、10文字以上は入力できなくなります。

10文字を超えて入力しようとしても、それ以上は入力欄に反映されないんです。

ただ、この方法には1つ注意点があります。

maxlengthによる制限は、入力時にはエラーメッセージ等は表示されないんです。

ユーザーが文字数オーバーに気づくのは、入力できなくなってからということになります。

そこで、JavaScriptを使って、もう少し親切な文字数制限を実装してみましょう。

○JavaScriptでの文字数カウントと制限

JavaScriptを使えば、リアルタイムに入力文字数をカウントして、制限文字数を超えた時にはエラーメッセージを表示する、というような処理ができます。

例えば、残り入力可能文字数をリアルタイムで表示したり、文字数オーバー時に入力欄の色を変えたりと、ユーザーフレンドリーな制限が可能になるんです。

○サンプルコード6：JavaScriptで文字数制限

それでは実際に、JavaScriptを使った文字数制限のサンプルコードを見てみましょう。

<input type="text" id="nameInput">
<p id="nameCounter">0/10</p>

const nameInput = document.getElementById('nameInput');
const nameCounter = document.getElementById('nameCounter');
const maxLength = 10;

nameInput.addEventListener('input', function() {
  const currentLength = this.value.length;
  nameCounter.innerText = `${currentLength}/${maxLength}`;

  if (currentLength > maxLength) {
    nameInput.style.backgroundColor = 'red';
    nameCounter.style.color = 'red';
  } else {
    nameInput.style.backgroundColor = '';
    nameCounter.style.color = '';
  }
});

このコードでは、入力欄（nameInput）に入力があるたびにinputイベントが発火し、関数内の処理が実行されます。

まず、現在の入力文字数（currentLength）を取得し、nameCounterに「現在の文字数/最大文字数」という形式で表示しています。

そして、currentLengthがmaxLength（ここでは10）を超えていれば、入力欄の背景色とカウンターの文字色を赤に変更。

超えていなければ、色を元に戻すという処理になっています。

こうすることで、ユーザーは自分が何文字入力したのか一目で分かりますし、文字数オーバー時にも視覚的に気づくことができるわけです。

実行結果としては、次のような表示になります。

入力文字数が制限内の場合

こんにちは
7/10

入力文字数が制限を超えた場合（背景と文字が赤く変化）

こんにちは、世界！
15/10

このように、JavaScriptを使えば、ユーザーフレンドリーな文字数制限がスムーズに実装できるんですね。

●よくあるエラーと対処法

JavaScriptでリアルタイム入力チェックを実装していると、初心者にありがちなエラーにぶつかることがあります。

せっかく頑張ってコードを書いたのに、エラーが出てしまってがっかりした経験、私にもあります。

でも、エラーメッセージをしっかり読み解けば、原因の特定と解決への糸口が見えてくるんです。

ここでは、よくあるエラーとその対処法を3つ取り上げてみましょう。

○「Uncaught TypeError: Cannot read property ‘value’ of null」エラー

このエラーは、JavaScriptがHTMLの要素を取得できていない時によく発生します。

例えば、次のようなコードがあったとします。

const nameInput = document.getElementById('nameInput');
console.log(nameInput.value);

もし、HTMLにid="nameInput"の要素が存在しなければ、nameInputはnullになります。

その状態でnameInput.valueにアクセスしようとすると、このエラーが発生するわけです。

対処法としては、まずHTMLに目的の要素が存在するか、idが正しいかを確認しましょう。

また、JavaScriptの実行タイミングにも注意が必要です。

HTMLの読み込みが完了する前にJavaScriptが実行されていないか、確認してみてください。

○「Uncaught RangeError: Invalid regular expression」エラー

このエラーは、正規表現のパターンが不正な場合に発生します。

例えば、次のようなコードがあったとします。

const regex = /^[0-9]*$/;
console.log(regex.test('123'));

この正規表現パターンは、数字のみで構成された文字列にマッチするものです。

しかし、もし正規表現リテラルの中で特殊文字をエスケープし忘れると、このエラーが発生します。

対処法としては、正規表現パターンが正しく記述されているか、特殊文字のエスケープ漏れがないかをチェックしましょう。

正規表現のテストには、オンラインのテストツールなども活用すると便利です。

○「Uncaught TypeError: ‘value’ of undefined」エラー

このエラーは、存在しないプロパティにアクセスしようとした時に発生します。

例えば、次のようなコードがあったとします。

const nameInput = document.getElementById('nameInput');
console.log(nameInput.value.length);

もし、nameInputの値が未入力（空文字）の状態だと、nameInput.valueは空文字列になります。

そのため、nameInput.value.lengthは問題なく実行できます。

しかし、nameInputがnullの場合、nameInput.valueはundefinedになります。

undefinedに対してlengthプロパティにアクセスしようとすると、このエラーが発生するわけです。

●リアルタイム入力チェックの応用例

ここまで、半角英数字のみ、数字のみ、文字数制限など、様々な入力制限の方法を見てきました。

それぞれの方法を組み合わせることで、より実践的なリアルタイム入力チェックが実現できるんです。

例えば、必須入力項目のチェックや、メールアドレスの形式チェック、パスワードの強度チェックなど、フォームのバリデーションでよく使われる処理があります。

ここでは、そんな応用的な入力チェックの事例を、サンプルコードを交えて紹介していきましょう。

○サンプルコード7：必須入力項目のチェック

フォームの中には、必ず入力が必要な項目ってありますよね。

例えば、会員登録フォームでは、名前やメールアドレスは必須だったりします。

そんな必須入力項目をリアルタイムにチェックするサンプルコードを見てみましょう。

<form id="myForm">
  <label for="nameInput">名前（必須）：</label>
  <input type="text" id="nameInput" required>
  <br>
  <label for="emailInput">メールアドレス（必須）：</label>
  <input type="email" id="emailInput" required>
  <br>
  <button type="submit">送信</button>
</form>

const myForm = document.getElementById('myForm');
const nameInput = document.getElementById('nameInput');
const emailInput = document.getElementById('emailInput');

myForm.addEventListener('submit', function(e) {
  if (!nameInput.value || !emailInput.value) {
    e.preventDefault();
    alert('必須項目を入力してください。');
  }
});

このコードでは、HTMLのrequired属性を使って必須入力項目を指定しています。

そして、フォームのsubmitイベントリスナーの中で、必須項目（nameInputとemailInput）の値をチェックしています。

もし、いずれかの必須項目が未入力だった場合は、e.preventDefault()でフォームの送信をキャンセルし、アラートを表示するようになっています。

こうすることで、ユーザーが必須項目を未入力のままフォームを送信しようとしても、送信が阻止され、入力を促すことができるわけです。

○サンプルコード8：メールアドレス形式チェック

メールアドレスの入力欄では、単に入力があるかどうかだけでなく、メールアドレスとして正しい形式かどうかもチェックしたいですよね。

そんなメールアドレスの形式をリアルタイムにチェックするサンプルコードを見てみましょう。

<input type="text" id="emailInput">
<p id="emailError" style="color: red;"></p>

const emailInput = document.getElementById('emailInput');
const emailError = document.getElementById('emailError');

emailInput.addEventListener('input', function() {
  const email = this.value;
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!regex.test(email)) {
    emailError.innerText = '正しいメールアドレスを入力してください。';
  } else {
    emailError.innerText = '';
  }
});

このコードでは、メールアドレスの形式をregexという正規表現パターンで定義しています。

そして、emailInputに入力があるたびに、入力された値（email）がその正規表現パターンにマッチするかをチェックしています。

もし、正規表現にマッチしない（つまり、メールアドレスとして不正な形式）場合は、emailErrorにエラーメッセージを表示。

マッチする場合は、エラーメッセージを消去するようになっています。

こうすることで、ユーザーがメールアドレスを入力している最中に、リアルタイムで形式のチェックができるわけです。

正しい形式で入力されていれば何も表示されませんが、不正な形式だとすぐにエラーメッセージが表示される、という具合ですね。

○サンプルコード9：パスワード強度チェック

パスワードの入力欄では、セキュリティ上、ある程度の強度を持ったパスワードを要求したいですよね。

例えば、最低文字数以上で、英数字両方を含む、といった条件です。

そんなパスワードの強度をリアルタイムにチェックするサンプルコードを見てみましょう。

<input type="password" id="passwordInput">
<p id="passwordStrength"></p>

const passwordInput = document.getElementById('passwordInput');
const passwordStrength = document.getElementById('passwordStrength');

passwordInput.addEventListener('input', function() {
  const password = this.value;
  let strength = 0;

  if (password.length >= 8) strength++;
  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
  if (/\d/.test(password)) strength++;

  switch (strength) {
    case 0:
      passwordStrength.innerText = '弱い';
      passwordStrength.style.color = 'red';
      break;
    case 1:
      passwordStrength.innerText = '中';
      passwordStrength.style.color = 'orange';
      break;
    case 2:
      passwordStrength.innerText = '強い';
      passwordStrength.style.color = 'green';
      break;
    case 3:
      passwordStrength.innerText = '非常に強い';
      passwordStrength.style.color = 'darkgreen';
      break;
  }
});

このコードでは、パスワードの強度を次の3つの条件でスコア化しています。

パスワードの長さが8文字以上（password.length >= 8）
英小文字と英大文字の両方を含む（/[a-z]/.test(password) && /[A-Z]/.test(password)）
数字を含む（/\d/.test(password)）

そして、スコア（strength）に応じて、passwordStrengthに強度のレベル（弱い、中、強い、非常に強い）を表示するようになっています。

こうすることで、ユーザーがパスワードを入力している最中に、リアルタイムでパスワードの強度が評価され、視覚的にフィードバックされるわけです。

パスワードの強度が低ければ、より強力なパスワードを入力するよう促すことができますね。

○サンプルコード10：クレジットカード番号の検証

オンラインショッピングなどで、クレジットカード番号の入力が必要なことがありますよね。

その際、番号の形式が正しいかどうかをチェックしたいところです。

そんなクレジットカード番号の検証をリアルタイムに行うサンプルコードを見てみましょう。

<input type="text" id="cardInput">
<p id="cardError" style="color: red;"></p>

const cardInput = document.getElementById('cardInput');
const cardError = document.getElementById('cardError');

cardInput.addEventListener('input', function() {
  const card = this.value;
  const regex = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/;

  if (!regex.test(card)) {
    cardError.innerText = '正しいクレジットカード番号を入力してください。';
  } else {
    cardError.innerText = '';
  }
});

このコードでは、クレジットカード番号の形式をregexという正規表現パターンで定義しています。

この正規表現は、主要なクレジットカード会社（Visa、Mastercard、AmericanExpress、Discover）の番号形式にマッチするように設計されています。

そして、cardInputに入力があるたびに、入力された値（card）がその正規表現パターンにマッチするかをチェックしています。

もし、正規表現にマッチしない（つまり、クレジットカード番号として不正な形式）場合は、cardErrorにエラーメッセージを表示。マッチする場合は、エラーメッセージを消去するようになっています。

こうすることで、ユーザーがクレジットカード番号を入力している最中に、リアルタイムで形式のチェックができるわけです。

正しい形式で入力されていれば何も表示されませんが、不正な形式だとすぐにエラーメッセージが表示される、という具合ですね。

ただ、この正規表現は番号の形式をチェックするだけで、番号の有効性までは保証しないことに注意しましょう。

実際のクレジットカード決済では、サーバーサイドで番号の有効性を確認する必要があります。