フォームに入力された文字を送信前にチェックしたい

送信される前に入力内容をチェックできると便利

送信される前に入力内容をチェックできると、困らずに済んで便利

ウェブ上のフォームに入力された文字が、期待通りの規則に沿った文字になっているかどうかを、送信される前に自動チェックできると便利です。

例えば、メールアドレスを入力してほしい欄に全く異なる文字が入力されていたり、電話番号を入力して欲しい欄に全く異なる文字が入力されていたりすると、そのまま送信されても困ってしまいますから。


 
複雑な入力規則チェックができる便利なスクリプトも配布されているが……
複雑な条件でも入力チェックしてくれるスクリプト

複雑な条件でも入力チェックしてくれるスクリプト

入力内容をその場でチェックできる便利なスクリプトとして、以前に「jQuery Validation Engine」をご紹介しました。文字数や文字種、選択個数、日付、URLなど様々なチェック形態が用意されていて、チェック結果を半透明のバルーンに表示してくれます。

使い方は、記事「フォームの入力内容をリアルタイムにチェックする方法」をご覧下さい。テキスト入力欄だけでなく、チェックボックスやラジオボタンの選択状態も扱える便利なスクリプトです。


 
外部ツールを読み込まずに入力チェックをしたい
外部のツールを読み込まずに済ませたい

外部ツールを使わずに済ませたい

上記のスクリプトは便利ですが、jQueryとスクリプト本体の読み込みが必要なので、準備に若干の手間がかかります。そこまで大がかりなことはせずに、ちょっとだけ入力チェックができれば良いのだ、という場合もあるでしょう。

そこで本記事では、外部のスクリプトを使わずに、JavaScriptソースを直接記述して簡単な入力チェック機能を作る方法をご紹介いたします。フォームのテキスト入力欄に望まない文字が入力されていないかどうかを手軽にチェックできる方法です。


 

スクリプトを使わずに、HTMLだけで入力チェックできる条件もある

JavaScriptを使って入力チェックする方法を解説する前に、そもそもスクリプトを使わなくても入力内容をチェックできる方法を簡単にご紹介しておきます。

HTML5では、テキスト入力欄を作るinput要素に特定の属性を付加することで、ブラウザ内部の機能で入力チェックができるようになりました。以下にご紹介する種類の入力チェックだけで済むのなら、わざわざスクリプトを記述する必要はありません。

入力必須項目には、required属性を使う
<input type="text" required>
空欄のまま送信しようとすると警告される (Firefoxでの表示例)

空欄のまま送信しようとすると警告される (Firefoxでの表示例)

input要素に属性値「required」を加えると、その項目は入力必須項目として取り扱われます。空欄のままで送信しようとしても、ブラウザが警告を出した上で送信を止めてくれます。

ただし、required属性に非対応の古いバージョン(IE9以下など)では、無視してそのまま送信されます。また、本稿執筆時点のSafariでも警告されません。


 
メールアドレス入力欄には、email属性値を使う
<input type="email">
入力内容がメールアドレスでない場合は警告される (Chromeでの表示例)

メールアドレスではない場合は警告される (Chromeでの表示例)

input要素のtype属性の値を「email」にすれば、メールアドレスの入力項目だと認識されます。見た目は他のテキスト入力欄と変わりませんが、メールアドレスではなさそうな文字列が入力されている場合(「@」記号がない場合)には、ブラウザが警告を出した上で送信を止めてくれます。

※空欄の場合には何もチェックされずに送信されます。無記入を避けたい場合は、先程のrequired属性も同時に記述しておきます。


 
URL入力欄には、url属性値を使う
<input type="url">
URLではなければ警告される (Chromeでの表示例)

URLではなければ警告される (Chromeでの表示例)

input要素のtype属性の値を「url」にすれば、URLの入力欄だと認識されます。見た目は他のテキスト入力欄と変わりませんが、URLではなさそうな文字列が入力されている場合(「http」で始まっていない場合)には、ブラウザ側が警告を出した上で送信を止めてくれます。

※空欄の場合には何もチェックされずに送信されます。無記入を避けたい場合には、先程のrequired属性も同時に記述しておきます。


 
電話番号入力欄には、tel属性値を使った上でパターンを指定すればチェックできる
<input type="tel" pattern="[\d-]*">
指定した規則に沿っていなければ警告される (Firefoxでの表示例)

指定した規則に沿っていなければ警告される (Firefoxでの表示例)

電話番号入力欄を作るには、input要素のtype属性に値「tel」を指定します。しかし、これだけでは入力チェックは行われません。同時にpattern属性を使って入力規則を正規表現で書けば、その条件に合致しているかどうかをブラウザがチェックしてくれます。

※正規表現については本記事で後述します。上記の例で記述した正規表現は、「数字かハイフン記号が0個以上ある場合」をチェックするだけの簡易な記述です。


 
テキスト入力欄なら、pattern属性で入力規則を指定した上で、title属性で案内できる
入力規則に従っていないことは示されるが、規則そのものは表示されない (Chromeでの表示例)

入力規則に従っていないことは示されるが、規則そのものは表示されない (Chromeでの表示例)

正規表現で入力規則を指定できるpattern属性は、input要素のtype属性の値がtext、search、tel、url、email、passwordの場合(=1行のテキスト入力欄)で使用可能です。入力内容が規則に合致していない場合は、右図のように警告されます。

pattern属性の記述だけでは、入力チェックはできるものの入力可能な形式の案内まではできません。しかし、title属性の値に案内を書いておけば、警告の表示時に併せて表示されます。
<input type="text" pattern="[A-Z]*" title="英大文字のみで入力して下さい。">
title属性に指定した文字列が案内として表示される(Chromeでの表示例)

title属性に指定した文字列が案内として表示される(Chromeでの表示例)

上記のpattern属性値は、アルファベットの大文字だけを入力可能にする記述です。その案内をtitle属性値に記述しています。この場合、もし条件に合致しない文字列が入力された場合には、右図のように警告が表示されます。

※どんな環境でも必ずtitle属性の中身が警告と一緒に表示されるとは限りません。入力制限を施す場合は、常に見える場所にも制限内容を記しておきましょう。


 

では、JavaScriptを使って入力内容をチェックする意味は?

上記でご紹介したように、わざわざスクリプトを記述しなくてもHTMLだけで入力内容の簡単なチェックができます。この入力チェック機能はブラウザ内蔵の機能なので、JavaScriptが無効に設定されている場合でもチェックされるメリットもあります。では、JavaScriptで入力チェックをする意味はないのか、というとそうでもありません。

JavaScriptを使って入力内容をチェックするメリット
JavaScriptを使って入力チェックをすると便利な場面として、例えば以下のような場合があります。

  • (A) エラーメッセージや警告用の装飾を独自に用意したい場合:
    代表的なブラウザでは、バルーン(吹き出し)を使って警告が表示されます。もっと他の装飾を使って警告したり、入力欄自体の配色を変えて分かりやすくしたりしたい場合には、JavaScriptを使う必要があります。
  • (B) 非対応のブラウザでも入力チェックを実現したい場合:
    IE9以下やAndroid4.4以下のような古いブラウザでは、pattern属性がサポートされていないため、JavaScriptでチェックする必要があります。また、Mac版SafariやiOS版Safariでは、pattern属性をサポートしているものの、条件に合致しない場合でも送信は中止されません。送信を止めたい場合にはJavaScriptを使う必要があります。
  • (C) 複数行の入力欄(textarea要素)でも入力チェックをしたい場合:
    pattern属性が使えるのはinput要素で作る1行のテキスト入力欄のみです。textarea要素で作る複数行の入力欄でもチェックしたい場合には、JavaScriptを使う必要があります。
  • (D) 複数の項目を使って複合的なチェックをしたい場合:
    「チェックボックスやラジオボタンが選択されている場合のみ、特定のテキスト入力欄を入力必須にする」といった複雑な条件を使いたい場合には、JavaScriptを使う必要があります。

本記事では、上記の(A)~(C)を実現できるJavaScriptの書き方をご紹介いたします。(D)のような複合的なチェックは、先程ご紹介した記事「フォームの入力内容をリアルタイムにチェックする方法」で解説している外部スクリプトを活用して下さい。

JavaScriptを使ってテキスト入力欄の入力内容をチェックする方法

さて、それではJavaScriptを使って入力チェック(入力制限)を実現する方法として、下記のチェック内容を例にして解説いたします。

【本記事の目次】

まずは、ベースになるHTMLとCSSの記述方法から見ていきましょう。