Music, Web, Mac, iPhone, 三十路男の思いつき・・

Ajaxを使った「入力フォームのチェックスクリプト」。
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
http://tetlaw.id.au/view/javascript/really-easy-field-validation

デモサイトで体験してみてください。
http://tetlaw.id.au/upload/dev/validation/

このように titleタグでメッセージの日本語化の出来ます。この仕様がスバラシイ！！



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

2)以下をヘッダに追加。(必要ならCSSもね。)

 <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>

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閉じタグ後に以下をを記述。

<script type="text/javascript">
new Validation('form-id',{useTitles:true});
//または new Validation(document.forms[0],{useTitles:true});
</script>

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

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