(HTML,CSS,JavaScript)JavaScriptで入力チェック・文字を入力制限する方法(2ページ目)テキスト入力欄に対して、JavaScriptを使わずにHTMLだけで入力制限をする書き方から、JavaScriptを使って細かく入力チェックをする方法までを解説。メールアドレスや日付のように入力文字数や文字種を制限したいフォームでは、リアルタイムにエラー表示できると便利。正規表現などを使う入力チェックの書き方をサンプルと共にご紹介。文宏ホームページ作成ガイドJavaScriptでテキスト入力欄の入力内容をチェックする方法それでは、JavaScriptを使って入力チェック(入力制限)機能を作る方法をご紹介いたします。チェック対象の入力フォームを作るHTMLソースと、チェック結果を表示するための装飾を作るCSSソースを掲載しておきます。本記事のこれ以降に解説するJavaScriptソースは、以下のHTMLソースで入力フォームが作られていることを前提にしています。form要素の中でinput要素やtextarea要素を使ってテキスト入力欄を作っているだけの、特別な点はない普通の入力フォームです。span要素を使って入力チェック結果を表示する空間を設けています。value="送信"></p></form>上記のHTMLソースそのままでなければ使えないわけではなく、以下の条件A~Cを満たしていればどんなHTMLでも問題ありません。条件A:入力チェック対象のテキスト入力欄はinput要素かtextarea要素のどちらかで作成し、チェック内容の種類をclass名で指定します。条件B:各入力欄の隣に、エラーメッセージ表示用の要素を1つ用意します。それらには共通のclass名を付加しておきます。※上記の例ではspan要素を使っていますが、他の要素でも構いません。条件C:上記の(A)と(B)の両方を含む親要素を1つ用意します。※上記の例ではp要素を使っていますが、他の要素でも構いません。本記事でご紹介するJavaScriptソースの都合上、省略はできません。入力欄とエラー表示用要素の1つずつだけを含む何らかの親要素が必須です。(A)テキスト入力欄、(B)入力チェック結果表示スペース、(C)それらを囲む親要素の3点が1セットになっていれば良い■チェック対象の把握やチェック内容の判別のためにclass名を付加JavaScriptで入力チェックを施すため、各要素にはclass名を付加しています。次のページ以降でご紹介するJavaScriptでは、このclass名を使って入力チェックの種類を判別してチェックを実行します。ここでは例として、以下のようなclass名を用意しました。最低2文字以上入力されているかどうかをチェックどれもclass名は自由に決めて構いません。同じclass名を何度使っても構いません。チェック内容が同じ入力欄には同じclass名を付けておけば、記述するスクリプトは1つだけで済みます。■form要素自体にもclass名を付加フォームを作るform要素には、送信処理の実行前に全項目を一括チェックして「送信するか送信を中止するか」を判断するスクリプトを実行するために「class="checkform"」と書いておきます。1ページ内にチェック対象のフォーム(form要素)が複数個ある場合でも、同じclass名を付けて構いません。入力チェック結果の表示用スペースとして、各項目の隣に下記のような空要素を記述しました。class="alertarea"></span>span要素以外の要素を使っても構いませんし、class名は自由に変更しても構いませんが、全項目でclass名は統一しておく必要があります(上記の例では「alertarea」)。これは、JavaScript側から「エラーメッセージの表示用スペース」を判別するためにclass名を使っているからです。本記事でご紹介するサンプルでは、入力チェック結果のエラーメッセージを表示する要素を以下のように装飾しました。この記述は特に必須ではありませんから、好みに応じて自由に装飾して下さい。}各行の意味は、コメントの形で書いたとおりです。このCSSソースはすべて省略しても入力チェックの動作に影響はありません。実際の動作を試してみたい場合は、サンプルページ「JavaScript入力チェック例」をご覧下さい。表示例は以下の通りです。本記事でご紹介しているソースに加えて、説明用に番号や記号を付加してあります。サンプルページのデフォルトの表示さて、HTMLとCSSの準備ができたら、入力チェックを実行するJavaScriptソースを記述してみましょう。本記事では、以下のA~Eに示す5つの書き方をご紹介いたします。(p.7)A~Dは必要に応じてご参照下さい。Eは、入力内容が指定の規則に沿っていない場合に送信を中止するための処理です。これがなければ入力チェックの意味がありませんから、Eの記述は必須です。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。