(HTML,CSS,JavaScript)jQueryで簡単!フォームをリアルタイムで入力チェック(4ページ目)ウェブ上のフォームでは、JavaScriptでリアルタイムに入力チェックし、その場でエラー表示のバルーンを出せると便利。jQuery-Validation-Engineを使えば、入力文字列や選択内容が指定条件(複数項目の組み合わせも可)を満たしているかどうかを入力と同時に確認し、ミスがあればエラーメッセージを吹き出しの形で表示可能。送信前に自動で入力チェックされる使いやすいフォームの作り方を解説。(テキスト入力欄)具体的なチェック条件の指定方法は、以下の通りです。テキスト入力欄に対するチェックを例にして、様々な条件指定方法をご紹介いたします。class="validate[required,minSize[6]]">条件に「minSize[6]」と指定すると、「最低6文字の入力」をチェックできます。入力された内容が5文字以下だと、エラーメッセージが表示されます。class="validate[required,maxSize[12]]">条件に「maxSize[12]」と指定すると、「最大12文字までの入力」をチェックできます。入力された内容が13文字以上だと、エラーメッセージが表示されます。class="validate[required,minSize[5],maxSize[10]]">複数の条件をカンマで区切って連続で指定することもできます。上記のように、最小文字数(minSize)と最大文字数(maxSize)を同時に指定すれば、「5~10文字の範囲での入力」をチェックできます。※ここでの文字数の指定は、バイト数ではなく文字数なので、半角英字でも全角日本語でも、どちらでも1文字は1文字とカウントされます。class="validate[required,custom[onlyLetterNumber]]">条件に「custom[onlyLetterNumber]」と指定すると、「英数字のみの入力」をチェックできます。「0~9」、「A~Z」、「a~z」以外の文字が入力されていると、エラーメッセージが表示されます。class="validate[required,custom[onlyLetterSp]]">条件に「custom[onlyLetterSp]」と指定すると、「英字と空白のみの入力」をチェックできます。「A~Z」、「a~z」か空白文字以外の文字が入力されていると、エラーメッセージが表示されます。class="validate[required,custom[onlyNumberSp]]">条件に「custom[onlyNumberSp]」と指定すると、「数字と空白のみの入力」をチェックできます。「0~9」か空白文字以外の文字が入力されていると、エラーメッセージが表示されます。class="validate[required,custom[number]]">条件に「custom[number]」と指定すると、「数字のみの入力」をチェックできます。「0~9」の文字しか入力できません。他の文字は、マイナス記号「-」や小数点記号「.」であってもエラーになります。class="validate[required,custom[integer]]">条件に「custom[integer]」と指定すると、「整数のみの入力」をチェックできます。ここでは、マイナス記号を含めた「-100」なども入力できます。「10.5」など小数を含むと「整数」ではないためエラーになります。class="validate[required,custom[integer],min[-5]]">条件に「custom[integer]」と「min[-5]」を指定すると、入力された数値が「-5」未満だった場合や、「-2.45」など整数ではなかった場合にエラーになります。※「-7」を入力すると「-5以上の数値にして下さい」と表示され、「12.5」を入力すると「整数を入力して下さい」と表示されます。「-15.2」だと両方のエラーが表示されます。class="validate[required,custom[integer],max[30]]">条件に「custom[integer]」と「max[30]」を指定すると、入力された数値が「31」以上だった場合や、「14.5」など整数ではなかった場合にエラーになります。class="validate[required,custom[url]]">条件に「custom[url]」と指定すると、「URLの入力」をチェックできます。このチェックでは、HTTP、HTTPS、FTPの3種類のプロトコルのみが対象です。class="validate[required,custom[email]]">条件に「custom[email]」と指定すると、「メールアドレスの入力」をチェックできます。class="validate[required,custom[ipv4]]">条件に「custom[ipv4]」と指定すると、「IPアドレスの入力」をチェックできます。class="validate[required,custom[phone]]">条件に「custom[phone]」と指定すると、「電話番号の入力」をチェックできます。電話番号として使用されない文字が入っているとエラーになります。丸カッコは使えません。class="validate[required,equals[password1]]">条件に「equals[password1]」と指定すると、「password1」というid名が割り振られた別の項目の値と、入力された内容が同じかどうかをチェックできます。パスワードの入力確認目的で使えます。class="validate[required,custom[date]]">条件に「custom[date]」と指定すると、「日付の入力」をチェックできます。(「2013/06/30」または「2013-06-30」のような形式の)日付を表す文字列以外が入力された場合には、エラーが表示されます。class="validate[custom[date],past[2010/01/01]]">条件に「custom[date]」と「past[2010/01/01]」を指定すると、「2010/01/01以前の日付の入力」をチェックできます。ここで、日付以外の文字列を入力したり、「2013-06-30」など指定日よりも後の日付を入力したりすると、エラーが表示されます。指定日には「NOW」と入力することで「今日の日付より昔の日付の入力」をチェックすることもできます。class="validate[custom[date],future[NOW]]">条件に「custom[date]」と「future[NOW]」を指定すると「今日よりも後の日付の入力」をチェックできます。ここで、日付以外の文字列を入力したり「2011-02-14」など指定日(今日)よりも前の日付を入力したりするとエラーが表示されます。「NOW」の代わりに「2012-12-24」など特定の日付を指定することもできます。上記でご紹介したように、テキスト入力欄だけに関しても細かなチェック条件を簡単に指定できます。jQuery-Validation-Engineでチェックできるのはテキスト入力欄だけではありません。チェックボックスやラジオボタンもチェックできます。「最大3個まで選択」や「『その他』項目の選択時にだけ文字を追加入力」のような、複雑なチェックも可能です。最後に、チェックボックスやラジオボタンに関するチェック方法や、エラーメッセージを独自の内容に書き換える方法、動作サンプル等をご紹介いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。