リアルタイムフォームバリデーション validation.js

validation.jsはフォーム入力のイライラをなくして
Webブラウジングとかショッピングをもっと快適にするためのスクリプトです。
(もちろんサーバサイドでのチェックは必須ですが…)

validation.jsのサンプルを見てみる

トピックス

• 特徴
• ダウンロード
• 導入方法
• 拡張
  • 表示メッセージを変更する
  • チップの位置を変更する
  • AjaxZip2.0を使う
  • ダイアログの設定
  • 複数項目を同時に設定する
• サンプル
• 更新履歴・追記
• 動作環境

特徴

フォームバリデーションのライブラリはたくさん存在しますが
validation.jsの特徴として

• リアルタイムでエラーを表示することで間違いを少なくする
• クリーンなHTMLで使える
• フォームのデザイン(HTMLの構成)に依存しない
• エラーチップの位置を変更できる
• エラー文、ダイアログに表示する文章を変更できる
• フォーム毎に設定を変更できる
• ダイアログと透明レイヤーの透過度を変更できる
• AjaxZip2.0と併用できる

などがあります。(詳細は導入方法・拡張に記述。)

ダウンロード

validation.jsにはjQuery1.2.6が必要になります。(サンプルファイルには含まれています。)

JSファイル

jquery-1.2.6.min.js(54.5KB)

validation.js(7KB)

validation.min.js(6KB) ほとんど変わらないですけど…

サンプルファイル(AjaxZip2無し)

validation_.zip(31KB)

サンプルファイル(AjaxZip2.0同梱)

validation.zip(1,588KB)

導入方法

スクリプトファイルを以下のように読み込み、

<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/validation.js"></script>

HTMLファイルのinput要素に以下のクラスを割り振ることで
適用する項目を決めることができます。

• required - 必須項目
• retype-対象にするID - 再入力チェック
• email - メールアドレスチェック (*081114 mail から email に変わりました
• hankaku - 全角禁止
• tel - 電話番号(形式チェックはなし)
• numonly - 数字のみ
• zip - 郵便番号(形式チェックはなし)

また、適用させる項目はrequiredとhankakuは他の項目と同時に含めることが出来ます。
例えば下記のようにクラスにemail, hankaku, requiredを指定した場合は

<input type="text" name="mail" id="mail" value="" class="email hankaku required" />

必須項目・メールアドレスチェック・全角禁止になります。
またクラスに記述する順序は任意で構いません。
ところでvalidation.jsを導入する場合、input要素には固有のidが必須になります。
またvalue属性も必須になります。

最後に任意のJSファイルで以下のように実行します。

$(function(){
$(".validate").validation();
)};

対象にするform要素は

$("対象にするform要素").validation();

で決定します。
form要素全てに適用する場合は

$("form").validation();

classに”validation”を含むform要素全てに適用する場合は

$(".validation").validation();

idに”validation”を含むform要素のみに適用する場合は

$("#validation").validation();

となります。

再入力をチェックする場合 (*081114追記

メールアドレスやパスワードなど
再入力を促す項目がある場合、それもvalidationの対象にすることができます。
たとえば、

<input type="text" id="mail" name="mail" val="" class="email hankaku required" />

の後に

<input type="text" id="remail" name="remail" val="" class="" />

といった再入力項目があるとします。
この項目は先のメールアドレス入力項目 input#mail と同じものを入力してもらうので

<input type="text" id="remail" name="remail" val="" class="retype-mail hankaku required" />

のようにクラスに retype-対象にする項目のID を含めます。
今回は対象にする項目(メールアドレス入力項目)のIDはmailとなっているので retype-mail としています。

select要素を対象にする場合 (*081113追記

select要素を対象にする場合は

<select name="sex" id="sex" class="required">
<option value="" selected="selected">選択してください</option>
<option value="male">男</option>
<option value="female">女</option>
</select>

のようにvalueが空のoption要素を含めます。value属性を指定しないとvalidationは行われません。
初期値には必ず空のvalue属性を指定してください。(初期値にはselected属性を指定することが推奨されています)
select要素は選択されているoptionが変わった場合にvalidationが行われます。

拡張

特徴でも記述したようにvalidation.jsはなるべく汎用性を持たせるために
さまざまな拡張プロパティがあります。

表示メッセージを変更する場合

たとえば、必須項目とメールアドレスチェックの文章を変えたいときは

$(".validate").validation({
msgs: {
required: "This field is required",
mail: "Enter the valid E-mail address"
}
});

とします。
msgsが持つプロパティの初期値は

• required: “必須項目です”
• retype: “直前の項目と同じ内容を入力してください”
• email: “正しいEメールアドレスを入力してください” (*081114 mail から email に変わりました
• hankaku: “全角文字は使えません”
• tel: “数字と’-'(ハイフン)以外は使えません”
• numonly: “数字のみで入力してください”
• zip: “正しい郵便番号を入力してください”
• submit: “必須項目を正しく入力してください”

です。実際に記述するときは順不同で構いません。
このうちrequiredからzipはエラーチップに表示される文章で
submitのみダイアログに表示される文章となっています。
これらのプロパティに含まれる文章にはHTMLタグを使うことが出来ます。

サンプルではダイアログのメッセージ(msgs.submit)に

$(".validate").validation({
msgs: {
submit: "入力が完了していない<strong>必須項目</strong>があります。<br /><strong>必須項目は全て入力</strong>してください。"
}
});

といったようにstrongタグと改行を含ませています。

チップの位置を変更する

チップは各input要素を基準にして表示位置が決定されます。
初期設定でチップはinput要素の右に表示されるようになっていますが
初期位置を

• 上: “top”
• 右: “right”
• 下: “bottom”

から選択することができ、初期値からの位置を細かく指定することができます。
例えば、チップをinput要素の下、さらに10px下方へ配置する場合は以下のようにします。

$(".validate").validation({
extension: {
position: "bottom",
top: 10,("10px")
left: 0
}
});

ここで注意するのは、inputの幅と高さはpaddingとborderを含まない点です。

input {
border: solid #DFDFDF 3px;
padding: 3px;
width: 200px;
height: 20px;
}

といった指定がされている場合、チップはinput要素に12px分重なることになります。
チップ位置の初期値はそれぞれ

• position: “right”
• top: 0
• left: 15(px)

になります。

AjaxZip2.0を使う

AjaxZip2.0を使う場合は以下のようjquery.jsとvalidation.jsの間でAjaxZip2.jsを読み込み

<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/lib/ajaxzip2.js"></script>
<script type="text/javascript" src="/js/validation.js"></script>

チップと同じextension内に

$(".validate").validation({
extension: {
AjaxZip2: true
}
});

とします。
AjaxZip2.0の詳しい使い方・設定などはKawa.netのページを参照してもらいたいのですが
対象にするinputのidを同じextension内で指定します。

$(".validate").validation({
extension: {
AjaxZip2: true,
zip: "zip",
zip2: "zip2",
pref: "pref",
addr1: "addr",
addr2: "addr2",
addr3: "addr3" (strtに相当)
}
});

それぞれの初期値は

• AjaxZip2: false
• zip: “zip”
• zip2: null
• pref: “pref”
• addr1: “addr”
• addr2: null
• addr3: null

になりますので、構成要素が以下のような

<input type="text" name="zip" id="zip" class="zip hankaku required" />
<input type="text" name="pref" id="pref" class="required" />
<input type="text" name="addr" id="addr" class="required" />

郵便番号・都道府県・都道府県以下の住所の場合はzip～addr3の設定は必要ありません。

ダイアログの設定

必須項目が未入力または正しく記入されていないまま(エラーチップが表示されている状態)で
submitボタンを押すとダイアログが表示されますが(必須項目でなければダイアログは表示されません)

• matOpacity: グレーアウトのレイヤーの透過度
• dialogOpacity: ダイアログの透過度
• duration: 表示する速さ
• closeTitle: 閉じるボタンのtitle属性

を変更することができます。これらを変更するには、

$(".validate").validation({
dialog: {
duration: "fast",
matOpacity: 0.6,
dialogOpacity: 0.9,
closeTitle: "このメッセージを閉じる"
}
});

のように記述します。上記が初期値になります。
ちなみにcloseボタンはマウスホバー時に”hover”がクラスに追加されるので
CSSを使ってロールオーバーイメージを指定することができます。(サンプルでは指定済み)

上記複数の項目を同時に指定する場合

メッセージ、チップ・AjaxZip2.0、ダイアログを同時に設定する場合は
以下のようにそれぞれをカンマで区切って記述します。

$(".validate").validation({
msgs: {
submit: "<span>入力が完了していない<strong>必須項目</strong>があります。<br /><strong>必須項目は全て入力</strong>してください。</span>
},
extension: {
position: "bottom",
top: 15,
left: 0,
AjaxZip2: true,
zip: "zip",
zip2: "zip2",
pref: "pref",
addr1: "addr",
addr2: "addr2",
addr3: "addr3"
},
dialog: {
duration: "fast",
matOpacity: 0.6,
dialogOpacity: 0.9,
closeTitle: "このメッセージを閉じる"
}
});

更新履歴・追記

08.11.14

再入力項目をvalidation対象に含むことができるようになりました。

08.11.13

select要素をvalidation対象に含むことができるようになりました。

08.08.28

input[type="hidden"]を対象に含めてたのが原因でした。。

08.08.28

一定条件下(主にかも)でtextareaのoffset.leftが取得できずにエラーが発生するバグがあります。。。修正済(@08.08.28)

動作環境

Windows: IE6, IE7, Firefox3, Opera9.5, Safari3, Chromeで確認

See also:

• jQueryを使ってdisplay: inline-blockを使うときのFirefox2への対処を考える (0)
• validation.js をアップデートしました (0)
• スムーズに流れてくるナビゲーション jQuery.floatnav.js (2)
• jQuery.selectable.jsご利用時の注意です (0)
• jQueryとCSSでつくるiPodのカレンダーのようなカレンダー (0)