エラーメッセージ内容の変更

方法としては２通りある。

タイプ別にエラーメッセージ内容を変更する

required や email などタイプ別のメッセージを変更させる方法。これは非常に簡単で validate 本体を読み込んだ後にメッセージ定義ファイル読み込むだけでいい。各言語向けのメッセージ定義ファイルが一緒に配布されているのでこのメッセージ定義ファイルを読み込めばローカライズは終了だ。

<script src="js/jquery-1.3.2.js" type="text/javascript">
</script>
<script src="js/validate/jquery.validate.js" type="text/javascript">
</script>
<script src="js/validate/messages_ja.js" type="text/javascript">
</script>

しかし、この各言語向けのメッセージ定義ファイルに日本語は含まれていない。調べてみたところ、日本語の定義ファイルを公開されている方がいた。タイプ別の日本語化のみであればこちらのファイルを利用させてもらえばいいだろう。

• jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化：Goodpic

個別にエラーメッセージ内容を変更する

入力項目１つ１つに対してエラーメッセージを変更する方法。各項目の rules に対応する messages を定義していく。

$("#form-message").validate({
rules: {
name: {
required: true
},
mail: {
required: true,
email: true,
},
remail: {
required: true,
email: true,
equalTo: "#form-mail"
}
},
messages: {
mail: {
required: "メールアドレスを入力してください",
email: "正しいメールアドレスを入力してください"
},
remail: {
required: "メールアドレスを入力してください",
email: "正しいメールアドレスを入力してください",
equalTo: "メールアドレスが一致しません"
}
}
});

example

• jQuery Plugin validate | エラーメッセージ内容の変更

エラーメッセージ表示位置の変更

エラーメッセージの表示位置を変更する方法もいくつかある。

• errorLabelContainer
• errorClass
• errorPlacement

ここでは、errorPlacement を利用したエラーメッセージの表示位置を変更する例をあげる。errorLabelContainer や errorClass を利用したエラーメッセージの表示は試していないので、すぎゃーん氏のエントリーを紹介して省略しておくこととする。

• 高機能ライブラリ「jQuery」とそのPlugin「Validation」 – すぎゃーんメモ

errorPlacement は、エラーとなった際に対象のエレメントとエラーが渡される。相対的にエラーメッセージを表示するには次のようになる。

$("#form-message").validate({
errorPlacement: function(error, element){
error.appendTo(element.parent().next());
}
});

<p>
<label for="name">
<span>名前</span>
</label>
<input id="form-name" name="name" />
</p>
<p>
</p>

ちなみに、サンプルを作成している過程において form のレイアウトを含め validate プラグに同梱されている cmxforms.js を読み込んでやればことが済むのではないかと気が付く。cmxforms.js を読み込むことで、デフォルトだと input 要素の右側に表示されるのだが、cmxforms.js を読み込むことでエラーメッセージは改行され input 要素にインデントを揃えて表示してくれるのだ。

example

• jQuery Plugin validate | エラーメッセージ表示位置の変更

関連サイト

• jQuery: The Write Less, Do More, JavaScript Library
• bassistance.de » jQuery plugin: Validation
• jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化：Goodpic