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