クールなフォームチェックAjaxライブラリ「Really easy field validation」

DEXAGOGOAjaxを使った「入力フォームのチェックスクリプト」。
PHPやjavascriptでダイアログ出すんじゃ、スマートじゃない。そこでAjax。
最近では様々開発されているので、うれしい限りなのですが、「結局どれがよいのか」。

phpspot開発日誌」さんでも複数、紹介されています。これを参考に自分の備忘録として・・。


phpspot開発日誌: JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ
http://phpspot.org/blog/archives/2007/03/javascript_43.html

この記事のように、下記の「Really easy field validation」は、使ってみた結果、ホントすばらしいです!

Really easy field validation * Dexagogo
https://github.com/atetlaw/Really-Easy-Field-Validation


このように titleタグでメッセージの日本語化が出来ます。この仕様がスバラシイ!!
入力を促す表示


■要点のみの設置法
———————————————-
1)「scriptaculous」フォルダ、「validation.js」をアップロード。、(必要なら「style.css」も。)

2)以下をヘッダに追加。(必要ならCSSもね。)
[js] <script src="prototype.js" type="text/javascript"></script>
<script src="validation.js" type="text/javascript"></script>
<script src="scriptaculous/src/effects.js" type="text/javascript"></script>[/js]
3)各inputタグに、class=”required validate-number” などのクラス属性を追加。(この場合、必須項目で数字のみ可。)
以下、設定値バリエーション。

required (必須項目)
validate-number (数字のみ可)
validate-digits (数値のみ可)
validate-alpha (アルファベットのみ可)
validate-alphanum (アルファベットと数字のみ可)
validate-date (日付のみ可)
validate-email(メールアドレスのみ可)
validate-url (URLのみ可)
validate-selection(リストメニューやセレクトボックスから選択)
validate-one-required(チェックボックスやラジオボタンで1つ以上選択)

4)デフォルト英語のメッセージを変更したいので、各inputタグに、title=”入力してください” などの警告メッセージ文をtitle属性で追加。

5)form閉じタグ後に以下をを記述。
[js]<script type="text/javascript">
new Validation(‘form-id’,{useTitles:true});
//または new Validation(document.forms[0],{useTitles:true});
</script>[/js]

———————————————-
これでお好みの警告メッセージが、input項目の下にフェードインで登場してくれます。

あ~スバラシか、スバラシか。

コメントを残す