前回までのForm.Validater.Inlineの使い方では、class属性に入力チェックの記述を直接することで、入力チェックを行いましたが、
今回は動的に行う方法のご紹介です。

class属性を利用するとコーディングしながら、入力チェックの設定をできて楽なんですが、class属性が煩雑になるのでフォームのスタイル付けが面倒であったり、可読性が下がったりする時があります。

そんな場合、入力チェックを設定をjavascriptを利用して行うとすっきりとしたフォームにできます。

具体的には設定部分を別途定義しておき、各要素に対して入力チェックを適用していく形になります。

フォームのマークアップ

今回の入力チェック用のフォームをマークアップします。
フォームの入力項目は適当なものです。

<form id="validateForm">
	<fieldset>
		<div class="mod form">
			<div class="inner">
				<div class="hd section"><h3>入力フォーム</h3></div>
				<div class="bd">
					<dl>
						<dt>氏名</dt>
						<dd><input type="text" name="name" value="" size="53" /></dd>

						<dt>開始日</dt>
						<dd><input id="afterDate" type="text" name="startDate" value="2011-10-01" /></dd>

						<dt>終了日</dt>
						<dd><input type="text" name="endDate" value="2010-12-01" /></dd>

						<dt>メールアドレス</dt>
						<dd><input type="text" name="email" value="" size="53" /></dd>

						<dt>コメント</dt>
						<dd><textarea name="comment" cols="50" rows="10"></textarea></dd>
					</dl>
				</div>
			</div>
		</div>
		<p class="control"><input type="submit" name="send" value="登録" /></p>
	</fieldset>
</form>

入力チェックの設定

入力チェックの設定は入力チェックを適用したい要素のid属性値、name属性値をキーに定義します。

/**
 * バリデータのプロパティリスト
 * 要素のid属性またはname属性をキーにする
 */
var formValidaters = {
	"name": [
		"required",
		{
			"type": "maxLength",
			"props": { "maxLength": 20 }
		}
	],
	"startDate": [
		{
			"type": "validate-date",
			"props": { "dateFormat": "%Y-%m-%d" }
		}
	],
	"endDate": [
		{
			"type": "validate-date",
			"props": { "dateFormat": "%Y-%m-%d" }
		},
		{
			"type": "validate-after-date",
			"props": { "afterElement": "afterDate" }
		}
	],
	"email": ["required", "validate-email"],
	"comment": ["required"]
};

入力チェックの適用

次に実際の入力チェックの設定を適用する部分です。

for inを利用して要素単位で適用していきます。
要素はid属性、name属性が適用させるものと一致するものをDOMツリーから検索します。

入力チェックのプロパティは$merge関数でマージしてひとつのオブジェクトにまとめます。
マージ完了後、validatorPropsプロパティに設定します。

最後にForm.Validator.Inlineをインスタンス化して入力チェックを有効にします。

for (var element in formValidaters) {
	var validatorProps = {};
	//id属性又はname属性より入力フィールドを取得する
	var e =	document.id(element) || $(document.body).getElement("*[name=" + element + "]");

	//バリデータのプロパティを生成する
	var vs = formValidaters[element];
	vs.each(function(validater, key) {
		switch($type(validater)) {
			case "string":
				e.addClass(validater);
				break;
			case "object":
				e.addClass(validater.type);
				validatorProps = $merge(validatorProps, validater.props);
				break;
		}
	});

	//バリデータのプロパティを設定する
	e.set("validatorProps", validatorProps);
}

//フォームにバリデータを適用する
new Form.Validator.Inline($('validateForm'));

最終的なソース

最終的に下記のようなコードになります。

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

	/**
	 * バリデータのプロパティリスト
	 * 要素のid属性またはname属性をキーにする
	 */
	var formValidaters = {
		"name": [
			"required",
			{
				"type": "maxLength",
				"props": { "maxLength": 20 }
			}
		],
		"startDate": [
			{
				"type": "validate-date",
				"props": { "dateFormat": "%Y-%m-%d" }
			}
		],
		"endDate": [
			{
				"type": "validate-date",
				"props": { "dateFormat": "%Y-%m-%d" }
			},
			{
				"type": "validate-after-date",
				"props": { "afterElement": "afterDate" }
			}
		],
		"email": ["required", "validate-email"],
		"comment": ["required"]
	};

	for (var element in formValidaters) {
		var validatorProps = {};

		//id属性又はname属性より入力フィールドを取得する
		var e =	document.id(element) || $(document.body).getElement("*[name=" + element + "]");

		//バリデータのプロパティを生成する
		var vs = formValidaters[element];
		vs.each(function(validater, key) {
			switch($type(validater)) {
				case "string":
					e.addClass(validater);
					break;
				case "object":
					e.addClass(validater.type);
					validatorProps = $merge(validatorProps, validater.props);
					break;
				}
			});

		//バリデータのプロパティを設定する
		e.set("validatorProps", validatorProps);
	}

	//フォームにバリデータを適用する
	new Form.Validator.Inline($('validateForm'));
});

以上で終了です。

サンプルデータはこちらからダウンロードできます。
Example Download: form-validater-dynamic.zip