WEBを駆使した売上UP/トータルサポートを提供　
株式会社パルムゲート

「JavaScript でバリデーション」では1つの入力項目に1つのバリデーションルールしか記述できなかった。このため、細かなチェックとそれぞれに対応する「簡潔なエラーメッセージ」を与えることができず、例えば「電話番号が入力されていないか、形式に誤りがあります」のような分かりにくいメッセージになりがちだ。

これに対応するためには、ルールの複数設定と、ルール⇔エラーメッセージの対応関係の保持が必須だ。

最初に思いつくのは、ルール名をキーとする連想配列 (ハッシュ) でバリデーションルールとエラーメッセージを記述し、ルール名で両者を関連付ける方法だ。

だが、この方法には問題があることが判明した。JavaScript では連想配列のデータの保持方法は規定されておらず、キーの保持順序は必ずしも登録順ではないのだ。このため、ルールの処理順序が意図した順番にならない可能性をはらんでいる。例えば以下のコードをブラウザで実行してみると、ブラウザによって結果が異なることが分かる。

<script type="text/javascript" language="javascript">
(function(){
	var hash = {999: 1, z: 2, '##': 3, 102: 4, a: 5, 55: 6};
	var result = '';
	for (var key in hash) {
		result += key + ' = ' + hash[key] + '\n';
	}
	alert(result);
})();
</script>

手元にあったブラウザで上記コードを実行した結果を以下に示す。

■ Google Chrome の場合 (26.0.1410.64 m)

■ Firefox の場合 (20.0.1)

■ IE (8.0.6001.18702)

これを見て分かるように、Google Chrome ではキーが数値の場合登録順序は保持されず昇順にソートされている。(数値以外のキーの場合は順序は保持されている。) 一方 Firefox と IE ではキーの登録順序は保持されているという違いがみられる。

各ブラウザの仕様でこの順序が保障されるわけではないので、やはりハッシュのキー順序に依存した実装をするのは問題があるようだ。