クールなフォームチェック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項目の下にフェードインで登場してくれます。 あ~スバラシか、スバラシか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です