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