- 2007-11-21 (水) 0:14
- ライブラリ
Ajax（JavaScript）で行う代表的なことの一つに「フォームのチェック（バリデート）」があります。
Adobe Spryを初めとした、各種のライブラリでも同じような機能が実装されていますが、なかでも「fValidator」はおすすめです。
次のように利用します。
まずは、配布サイトからファイルをダウンロードしましょう。
»fValidator - An open source(free) unobtrusive javascript tool for easy handling from validation
ページの一番下に「packed version」と「full version」があるので、好きな方をダウンロードします。
また、このライブラリは「mootools」というライブラリを利用しているので、こちらもダウンロードしましょう。
オプションを選んでダウンロードできますが、ここではすべてにチェックを入れてダウンロードした方がよいでしょう。
そしたら、ファイルを適当な場所にコピーして次のようにして取り込みます。
<script type="text/javascript" src="_js/mootools.js"></script>
<script type="text/javascript" src="_js/fValidator.js"></script>
そして、フォームを作成してid属性を付加します。
<form id="form1">
...
</form>
そしたら、<head>要素で次のようなスクリプトを記述して、対象のフォームを指定します。
<script type="text/javascript">
window.onload = function() {
var myValidator = new fValidator('form1');
}
</script>
これで準備完了です。チェックをしたいコントロールにはclass属性を次のようにして追加します。
class="fValidate['required']”
これで、自動的にフォームの必須入力チェックが行われます。
有効になったコントロールは背景が黄色くなります。
もし、未記入のままフォーカスをはずそうとすると・・
このようにコントロールが赤くなって、エラーメッセージが表示されます。正しく記入すると・・
という具合に青く変わります。
この他にも、数値のチェックや電話番号のチェック、メールアドレスやパスワードなどの「確認のためにもう一度記入してください」といったチェックも行うことができます。
ただ、エラーメッセージが英語だったり、色などがあらかじめ決められているため、少し扱いにくいかも知れません。
先ほどダウンロードするときに「full version」というのが選べますが、こちらを選んでダウンロードすると、JavaScriptのコードを見ることができます。非常に分かりやすくかかれているため、メッセージや色などは簡単に変更することができるでしょう。また、よく見ると各種確認も正規表現で行われているので、処理を追加したりするのも簡単にできそうです。
ぜひ、便利に使ってみてください。
»fValidator - An open source(free) unobtrusive javascript tool for easy handling from validation