Home » CSS | HTML | JavaScript | WebDev » リアルタイムフォームバリデーション validation.js

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

validation.jsサンプル

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

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

トピックス

特徴

フォームバリデーションのライブラリはたくさん存在しますが
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:

Comments:8

YOPPY 08-09-13 (土) 18:45

すごいですね!シンプルなフォームがここまでできるなんて、かっこいいです!参考にさせていただきました!
ひとつ質問があるのですが、utf-8でないと動作しないのでしょうか???shit_jisは無理なのでしょうか?
ものすごい初歩的な質問かもしれませんが、宜しくお願い致します。

nori 08-09-13 (土) 20:16

お役に立てれば何よりです。
HTMLがShift_jisの場合は、validation.jsを読み込むときにcharset=”utf-8″を指定すればいいです。

<script type="text/javascript" src="/js/validation.js" charset="utf-8"></script>
ぴたごら 08-11-13 (木) 15:50

noriさん、はじめまして。ぴたごらと申します。

こちらのvalidation.jsの表示がとても気に入って、ぜひ導入してみようと思いました。
selectフォームも必須入力項目にしたいのですが、
requiredをclassで指定しても表示されません。

selectフォームでも、最初は必須入力の注意書きを表示しておいて、
選択肢が選ばれたら、その注意書きが自動で消える、といったようなことは可能でしょうか?

nori 08-11-13 (木) 20:59

ぴたごらさん はじめまして。

そう言われてみればselect要素を対象にしていませんでした。。
select要素も対象に出来るように更新していますので 確認してみてくださいね。

http://moto-mono.net/sample/validation/index.html

一応ドキュメントも追記してますので
こちらも併せて見てみてください。

ぴたごら 08-11-14 (金) 0:11

> noriさん

こんなに早く対応してくださって、どうもありがとうございます!
新しく作っていただいたものを利用したら、select要素にもきちんと表示されるようになりました。
本当に助かりました。感謝です。

自サイトのフォームのアクセス解析をしていたら、エラーで離脱してしまう人が
けっこういるようだったので、リアルタイムに入力のチェックができるものを探していました。
そんな中でnoriさんのスクリプトが1番気に入ってしまいました♪

このスクリプトでは、メールアドレスの形式チェックができますが、
例えば、メールアドレスの欄を2つ作って、アドレスが一致していない場合は、
エラーメッセージを出すようなことはできるのでしょうか?

もしそれも可能でしたらお時間が許すときに作っていただけるとうれしいです。
かなり図々しいお願いですみません・・・(^◇^;)

ではでは、本当にどうもありがとうございました(^^)

nori 08-11-14 (金) 21:02

いえいえ 役に立てたのなら良かったです。
エラーの離脱は多いですね。遷移後にダメって言われるのが嫌いみたいですね。
僕も嫌いなんですけど。。

リアルタイムは賛否両論あるみたいですけど
僕は打ってすぐ違うのがわかったほうがいいかなと思ってます。
結局対象ユーザに依るんでしょうね。

再入力項目は…
おかげで渋ってたところのやる気が出ました。

再入力項目も対象にできるようになってますので
またサンプルを確認してみてください。

ドキュメントも追記してます。

ぴたごら 08-11-15 (土) 0:22

> noriさん

わ~!どうもありがとうございます!!!
ただの通りすがりにこんなに早く作っていただけるなんて・・・
感謝感謝です。まさに希望どおりの機能です・・・。

本当にこのスクリプトの表示かっこいいですね~!
IE7,IE6,Firefox3,Opera9,Safari3,Google Cromeにて、
表示の確認をさせてもらいましたが、どれも綺麗に表示されてうれしいです(^^)

ところで、noriさん、カンパとか募集されていませんか?
無償でこんなに早く対応していただけると、
noriさんのgmailのアドレスにamazonギフト券などを送らないと悪い気がしてきます(笑

ではでは、本当にどうもありがとうございました(^^)

nori 08-11-15 (土) 14:07

僕もやろうとは思ってたんですけど なかなか手つかずで…
言うてもらえて よかったです。

要望とかあればメールでもなんでもいいんで
今回みたいに言うてもらえると助かります。

カンパは…そうですね、今始めました。
いやいや そんなことはないです笑
喜んでもらえたのならそれでいいんです。

これからも 出来るときに更新していくので
またよければのぞいてください。

Comment Form
Remember personal info

Trackbacks:3

Trackback URL for this entry
http://moto-mono.net/2008/08/22/realtimeformvalidation.html/trackback
Listed below are links to weblogs that reference
リアルタイムフォームバリデーション validation.js from moto-mono
pingback from validation.js « moto-mono 08-08-22 (金) 20:45

[...] Newer [...]

pingback from tirolstar has been renewal !! « moto-mono 08-09-05 (金) 21:48

[...] Older [...]

trackback from moto-mono 08-11-14 (金) 21:24

validation.js をアップデートしました

要望のあった

select要素のチェック
再入力項目のチェック

を追加しました。サンプルで確認できます。
併せて メールアドレスチェックで指定するクラスが mail から …

Home > CSS | HTML | JavaScript | WebDev > リアルタイムフォームバリデーション validation.js

Search
Feeds
Meta

Return to page top