Form.Validaterのことを書こうと思ったのですが、長くなりそうなのでいくつかに分けて書きます。
今回は使用する準備と簡単な説明のみにします。

では導入する準備を始めます。

はじめに

まずはじめにMootoolsをダウンロードします。
必要な機能だけ選択してMootoolsを最適化します。

Mootools Core Builder
http://mootools.net/core

下記のものをチェックします。

• Core Core、Native、Class、Elementすべて
• Utilities Selectors、DomReady、JSON

軽量化するために、YUI Compressorをチェックしてダウンロードします。

Mootools More Builder
http://mootools.net/more

下記のものをチェックします。

• Core More、Lang
• Class Class.Binds
• Native Date
• Element Element.Forms、Element.Shortcuts
• Forms Form.Validator、Form.Validator.Inline
• Localization Date.English.US、Form.Validator.English

ここでも軽量化するために、YUI Compressorをチェックしてダウンロードします。

最後にエラーメッセージを翻訳するために、言語ライブラリを私のリポジトリからダウンロードします。

Form.Validator.Japanese.js
http://github.com/holyshared/mootools-more/tree/master/Source/Localization/

ライブラリの読み込み

次にライブラリを読み込みます。head要素内に読み込みライブラリを追加します。

	<script type="text/javascript" src="js/mootools-1.2.4-core.js"></script>
	<script type="text/javascript" src="js/mootools-1.2.4.4-more.js"></script>
	<script type="text/javascript" src="js/form.validator.japanese.js.js"></script>

フォームの作成

次にフォームを作成します。入力チェックを行いたい部分に入力チェック用のクラスを指定します。
ここではブログなどのコメントフォームを想定して、氏名、メールアドレス、コメントを入力項目としてもたせています。

それぞれ次のような入力チェックを行う場合、指定するクラスは下記のようなものになります。

<form id="validateForm" action="index.php">
	<fieldset>
		<dl>
			<dt>氏名</dt>
			<dd><input type="text" name="name" value="" class="required" /></dd>

			<dt>メールアドレス</dt>
			<dd><input type="text" name="email" value="" class="required validate-email" /></dd>

			<dt>コメント</dt>
			<dd><textarea name="comment" class="maxLength:500"></textarea></dd>
		</dl>
		<p><input type="submit" name="sendForm" value="submit" /></p>
	</fieldset>
</form>

javascriptコードの記述

MooTools.lang.setLanguage()を使用して言語を日本語に変更します。
後は、Form.Validator.Inlineのコンストラクタの引数に適用したいフォーム要素を指定します。
オプションも指定可能ですが、詳しい説明はまたの機会にします。

	window.addEvent("domready", function() {
		MooTools.lang.setLanguage("ja-JP");

		new Form.Validator.Inline($('validateForm'));
	});

これで、入力チェックが適用されるはずです。

次回は指定できる入力チェックの種類とオプションについて解説します。