jQuery：「validationEngine」の入力チェックで使えるオプションを紹介！

だま
だま

以前にフォーム入力チェックをjQueryで実装できるプラグイン「validationEngine」の使い方を紹介しました。

「validationEngine」の使い方

この記事の最後で必須項目以外の入力チェック方法を

のちのち別の記事で紹介するので

とか書いたみたいなんですが、ボーっとしているうちになぜか数ヶ月経ってしまいました。

今度こそちゃんと書きます。

入力チェック条件の確認方法・使い方

導入時に読み込んだ『jquery.validationEngine-ja.js』を開くと

"number": {
	"regex": /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/,
	"alertText": "* 数値を半角で入力してください"
},

こんな感じの記述が並んでいます。

"number"は数字のみの入力を受け付けるチェック条件です。

フォームへ入力チェックを追加したい！

例として、"number"で入力チェックしたい場合はhtmlへこのように記述します。

<input type="text" value="" class="validate[custom[number]]">

入力チェック+必須入力にしたい！

"number"で入力チェック+必須入力にしたい場合は、下記のように記述します。

<input type="text" value="" class="validate[required,custom[number]]">

エラーメッセージを変更したい！

『jquery.validationEngine-ja.js』内で"alertText"の部分を書き換える事でエラーメッセージを変更できます。

"number": {
	"regex": /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/,
	"alertText": "* 数値を半角で入力してね ミ☆" //エラーメッセージを変更
},

よく使いそうなチェック形式

元々「validationEngine」に入っているチェック形式で、よく使用しそうなものをピックアップして紹介します。

電話番号の形式で入力されているか

電話番号
<input type="text" value="" class="validate[custom[phone]]">

メールアドレスの形式で入力されているか

メールアドレス
<input type="text" value="" class="validate[custom[email]]">

同じ値が入力されているか

まず、1つ目の入力欄にclass="validate[required]"と任意のIDを指定します。

2つ目の入力欄にはclass="validate[required,equals[●●]"を指定します。
equals[●●]には1つ目で指定したIDを入れます。

下記はメールアドレスとメールアドレス(確認)に同じ値が入っているかチェックするサンプルです。

パスワード(確認)みたいな用途でも使えると思います。

メールアドレス [必須]
<input id="email" type="text" value="" class="validate[required,custom[email]]">
メールアドレス(確認) [必須]
<input type="text" value="" class="validate[required,equals[email]]">

最低文字数を指定

classに"validate[minSize[●(任意の数字)]]"を指定します。

作者の気持ちを50文字以上で入力してください。
<input type="text" value="" class="validate[minSize[50]]">

最大文字数を指定

classに"validate[maxSize[●(任意の数字)]]"を指定します。

作者の気持ちを50文字以内で入力してください。
<input type="text" value="" class="validate[maxSize[50]]">

チェックボックスを●●個以上選択

classに"validate[minCheckbox[●(任意の数字)]]"を指定します。

チェックボックスのnameには同じ値を指定してグループ化します。

下記はname="yakiniku"のチェックボックスグループから2個以上選択させるサンプルです。

好きな焼肉屋のメニュー [2つ以上選択してください]
<label><input type="checkbox" class="validate[minCheckbox[2]]" name="yakiniku" value="カルビ">カルビ</label>
<label><input type="checkbox" class="validate[minCheckbox[2]]" name="yakiniku" value="牛タン">牛タン</label>
<label><input type="checkbox" class="validate[minCheckbox[2]]" name="yakiniku" value="ハラミ">ハラミ</label>
<label><input type="checkbox" class="validate[minCheckbox[2]]" name="yakiniku" value="ホルモン">ホルモン</label>
<label><input type="checkbox" class="validate[minCheckbox[2]]" name="yakiniku" value="冷麺">冷麺</label>

チェックボックスを●●個以下選択

classに"validate[maxCheckbox[●(任意の数字)]]"を指定します。

チェックボックスのnameには同じ値を指定してグループ化します。

下記はname="parakeet"のチェックボックスグループから3個以下まで選択できるサンプルです。

好きなインコの種類 [3つまで選択できます]
<label><input type="checkbox" class="validate[maxCheckbox[3]]" name="parakeet" value="セキセイインコ">セキセイインコ</label>
<label><input type="checkbox" class="validate[maxCheckbox[3]]" name="parakeet" value="オカメインコ">オカメインコ</label>
<label><input type="checkbox" class="validate[maxCheckbox[3]]" name="parakeet" value="コザクラインコ">コザクラインコ</label>
<label><input type="checkbox" class="validate[maxCheckbox[3]]" name="parakeet" value="ボタンインコ">ボタンインコ</label>
<label><input type="checkbox" class="validate[maxCheckbox[3]]" name="parakeet" value="サザナミインコ">サザナミインコ</label>

入力チェックのカスタマイズ例

以下は元々「validationEngine」に入っているものではなく、独自に追加したチェック形式です。

コピーして『jquery.validationEngine-ja.js』に記述すれば入力チェックとして使用できます。

ひらがなで入力されているか

<!-- htmlの記述例 -->
ふりがな
<input type="text" value="" class="validate[custom[hiragana]]">
<!-- validationEngine-ja.js -->
"hiragana": {
	"regex": /^[\u3040-\u309F|\s]+$/,
	"alertText": "* ひらがなで入力してください。"
},

カタカナで入力されているか

<!-- htmlの記述例 -->
フリガナ
<input type="text" value="" class="validate[custom[katakana]]">
<!-- validationEngine-ja.js -->
"katakana": {
	"regex": /^[\u30A0-\u30FF|\s]+$/,
	"alertText": "* カタカナで入力してください。"
},

郵便番号の形式で入力されているか

<!-- htmlの記述例 -->
郵便番号
<input type="text" value="" class="validate[custom[zip]]">
<!-- validationEngine-ja.js -->
"zip": {
	"regex": /^\d{3}-\d{4}$/,
	"alertText": "* 郵便番号が正しくありません"
},

小数点を含む半角数字が入力されているか

<!-- htmlの記述例 -->
円周率を分かるだけ入力してください。
<input type="text" value="" class="validate[custom[float]]">
<!-- validationEngine-ja.js -->
"float": {
	"regex": /^(0|-?[1-9]\d*|-?(0|[1-9]\d*)\.\d+)$/,
	"alertText": "* 小数点を含む半角数字を入力してください"
},

時間を●●:●●の形式でチェック

<!-- htmlの記述例 -->
時間
<input type="text" value="" class="validate[custom[time]]">
<!-- validationEngine-ja.js -->
"time": {
	"regex": /^([01]?[0-9]|2[0-3]):([0-5][0-9])$/,
	"alertText": "* 時間は半角で HH:MM の形式で入力してください"
},

関連記事