Home > Javascript | jQuery | Tips | フレームワーク > jQueryでFormのバリデーション

jQueryでFormのバリデーション

jQueryの便利そうなプラグイン。ValidationAide
フォームの入力値の妥当性を検査してくれます。

使い方:
1.フォームをかく


<form id="Test">
	<div id="ClientValidationSummary"></div>
	<input type="text" id="name" title="名前" class="textbox validator-required" /><br />
	<input type="text" id="mail" title="メール" class="textbox validator-required validator-email" />
	<input type="submit" value="Submit" />
</form>

入力値にエラーがあった場合、ClientValidationSummaryのところに要約(サマリ)が表示されます。
titleで指定された文字列が要約表示時などに項目名として使われます。
バリデートしたい部品のclassに上記のような指定をします。
上記の場合、「名前」のところは「テキストボックス」「入力必須」で、
「メール」のところは「テキストボックス」「入力必須」「メールアドレス」でバリデートしてます。
validtor-emailとしておけば、aaa@aaa.comのような有効なメールアドレスの形式かどうかを検査してくれます。
表示されるメッセージをデフォルトから変更したい場合は、titleに” – “区切りで書きます。マイナスの前後にスペースが要るので注意。
例えば「title=”名前 – 名前を入力してください”」とすると、項目が「名前」、メッセージが「名前を入力してください」になります。
マウスをオーバーラップさせたときにも表示されてしまうのが難点?

2.初期化


$(function() {
	$("#Test").validationAideEnable();
});

formのIDを指定して、validationAideEnable()を実行します。
各部品の横にメッセージを表示したい場合などは、パラメータをJSON形式で渡します。


$("#Test").validationAideEnable(null, {showInlineMessages:true, inlineShowSpeed:"fast"});

第一引数は独自ルールを定義する場合に使います。
その辺の詳しいところはダウンロードしたファイルのdemoのソースを見てください。

3.サンプル

以上

Comments:8

dhfh 07-10-30 (火) 12:22

hdf

匿名 07-11-16 (金) 15:50

Add Your Comment

aaaa 08-01-28 (月) 18:08

Add Your Comment

匿名 08-02-12 (火) 19:58

ss

ひじり 08-02-22 (金) 11:33

jQueryでのvalidateを探していたらたどり着きました。
貴重な情報ありがとうございます。

そして色々さまよっていたら、日本語版があることを知りましたので、コメントしますね。
http://www.takeaky.com/ValidationAideJ/demos/index.html

ちなみに、圧縮されたデータはエラーが出た(Firefox2.0で確認)ので、未圧縮のものを圧縮しなおして解決しました。

コスミー 08-02-23 (土) 4:03

情報どうもありがとうございます。
なんかかっこいい感じですね。

09-03-13 (金) 16:56

Add Your Comment

あ12 09-04-17 (金) 11:34

Add Your Comment

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://red-treasure.com/report/wp-trackback.php?p=79
Listed below are links to weblogs that reference
jQueryでFormのバリデーション from コスミー報告書[社外秘]

Home > Javascript | jQuery | Tips | フレームワーク > jQueryでFormのバリデーション

Search
Feeds
Meta
 合計:011636
 今日:0107 昨日:0165

Return to page top