入力される内容に一定以上の文字数が必要な場合

入力フォームを作成した際、項目によっては「少なくとも○文字以上は入力して欲しい」という「最低入力文字数」を設定したいことがあります。 例えば、

  • 「パスワード入力欄」で最低6文字の入力が必要な場合
  • 「郵便番号入力欄」で7桁の入力が必要な場合
  • 「ID入力欄」で最低8文字の入力が必要な場合
  • 「電話番号入力欄」で最低10桁の入力が必要な場合

……などです。

そのような場合、入力欄のすぐ近くに「あと何文字の入力が不足しているのか」を常に表示しておくと、入力ミスを多少は減らせるでしょう。 また、自分で「何文字入力したのか」を数える必要がなくなるため、入力を楽にできます。

以下の入力フォームに、何か文字を入力してみて下さい。キーで入力するたびに、入力欄の右側に不足文字数の案内が表示されます。
※JavaScriptが有効な環境でないと表示されません。

■パスワード(6文字以上): (入力して下さい)

■希望ID(8文字以上): (入力して下さい)

ハイフンを除いて、一定以上の文字数が必要な場合

上記の例では、すべての入力文字をカウントして「不足文字数」を表示しています。 しかし、郵便番号や電話番号など、「-」(ハイフン)記号を除いてカウントしたい場合もあります。 その際、「ハイフンは入力しないで下さい」と掲載しておくのは不親切です。ハイフンを除いてカウントするのが望ましいでしょう。

以下のフォームにも何か文字を入力してみて下さい。先ほどの例と同様に、右側に不足文字数などが表示されます。 しかし、「-」(ハイフン)記号を入力した場合は、文字数にはカウントされません
※JavaScriptが有効な環境でないと表示されません。

郵便番号(7桁): (入力して下さい)
※「-」(ハイフン)記号は、あってもなくても構いません。

電話番号(10桁以上): (入力して下さい)
※「-」(ハイフン)記号は、あってもなくても構いません。

上記の「郵便番号」欄の場合、「150-0」(5文字)と入力しても「1500」(4文字)と入力しても、どちらの場合も「3文字足りません」と表示されます。 これは、「-」記号を除外してカウントしているからです。

※入力文字種のチェックはしていないので、「ABC-DEFG」などと入力しても「OK!」と表示されます。 ここでは「文字数の不足を防ぐための表示」を行う例示が目的なので、文字種まではチェックしていません。(このサンプルでは半角文字の「-」だけを除外しています。)

今回は、上記の例のように、「フォームに入力される内容に一定以上の文字数が必要な場合」に、不足している文字数をリアルタイムに案内(表示)する方法をご紹介いたします。
数行のスクリプトを書くだけで簡単に実現できます。