【jQuery】jquery.validate.jsの覚書

MovableTypeのプラグイン「メールフォームプラグイン」を使ってお問合せフォームを作ったのですが、このプラグインデフォルトのバリデーションチェックでは仕様を満たすことができなかったので、jquery.validate.jsで対応することにしました。

各種設定方法は参照先を見るとして、とりあえず自分が行った作業を振り返っておこうと思います。

メールフォームプラグイン

jquery.validate.jsの超訳

利用したパラメータ

required: true

必須項目にしたい項目に設定

email: true

メールアドレスのチェックを行うときに設定

groups:

姓・名と入力を分けた場合、それぞれでエラーメッセージを表示されるのですが、、エラーメッセージをまとめて表示させたい場合はグループ化させるとよいみたい。

messages:

表示するエラーメッセージを設定する

errorPlacement:

エラーメッセージの表示位置をある程度制御できるみたい

例えば、kanji_familyもしくはkanji_lastのテキストボックスの内容に入力漏れがあった場合、class="kanji_error"の場所に、エラーメッセージが表示されます。

if
	(element.attr("name")=="kanji_family"|| element.attr("name")=="kanji_last"){
	error.insertAfter(".kanji_error");
}

<td>
	<label for="f-kanji-famil" class="label02">姓</label><input id="f-kanji-family" type="text" name="kanji_family" class="txt-name01" value="<$MTMailPreviewExtParam name="kanji_family"$>">
	<label for="f-kanji-last" class="label02">名</label><input id="f-kanji-last" type="text" name="kanji_last" class="txt-name02" value="<$MTMailPreviewExtParam name="kanji_last"$>">
	<div class="kanji_error"></div>
</td>

jsの設定

$(function(){
	//validate
	$("form").validate({
		rules: {
			kanji_family :{
				required: true //必須項目
			},
			kanji_last :{
				required: true
			},
			kana_family :{
				required: true
			},
			kana_last :{
				required: true
			},
			mail_email :{
				required: true,
				email: true
			},
			consent :{
				required: true
			}
		},
		messages: {
			kanji_family :{
				required: "お名前（漢字）を入力してください"
			},
			kanji_last :{
				required: "お名前（漢字）を入力してください"
			},
			kana_family :{
				required: "お名前（カナ）を入力してください"
			},
			kana_last :{
				required: "お名前（カナ）を入力してください"
			},
			kana_family :{
				required: "お名前（カナ）を入力してください"
			},
			mail_email :{
				required: "メールアドレスを入力してください",
				email: "正しいメールアドレスを入力して下さい"
			}
		},
		groups: {
			kanji: "kanji_family kanji_last",
			kana: "kana_family kana_last",
		},
		errorPlacement: function(error, element) {
			if
			(element.attr("name")=="kanji_family"|| element.attr("name")=="kanji_last"){
				error.insertAfter(".kanji_error");
			}
			else if
				(element.attr("name") == "kana_family"  || element.attr("name") == "kana_last" ) {
				error.insertAfter(".kana_error");
			}
			else if(element.attr("name") == "mail_email") {
				error.insertAfter(".email_error");
			}
			else
				error.insertAfter(element);
		}
	});
});

フォームの設定

<tr>
	<th><span>お名前（漢字）</span> <em class="required">[必須]</em></th>
	<td>
		<label for="f-kanji-famil" class="label02">姓</label><input id="f-kanji-family" type="text" name="kanji_family" class="txt-name01" value="<$MTMailPreviewExtParam name="kanji_family"$>">
		<label for="f-kanji-last" class="label02">名</label><input id="f-kanji-last" type="text" name="kanji_last" class="txt-name02" value="<$MTMailPreviewExtParam name="kanji_last"$>">
		<div class="kanji_error"></div>
	</td>
</tr>
<tr>
	<th><span>お名前（カナ）</span> <em class="required">[必須]</em></th>
	<td>
		<label for="f-kana-family" class="label03">セイ</label><input id="f-kana-family" type="text" name="kana_family" class="txt-name01" value="<$MTMailPreviewExtParam name="kana_family"$>">
		<label for="f-kana-last" class="label03">メイ</label><input id="f-kana-last" type="text" name="kana_last" class="txt-name02" value="<$MTMailPreviewExtParam name="kana_last"$>">
		<div class="kana_error"></div>
	</td>
</tr>
<tr>
	<th><label for="f-mail">メールアドレス</label> <em class="required">[必須]</em></th>
	<td>
		<input id="f-mail" type="text" name="mail_email" class="txt-mail" value="<$MTMailPreviewEMail$>">
		<div class="email_error"></div>
	</td>
</tr>
<tr>
	<th><span>お問合せ内容</span></th>
	<td><textarea id="f-body" name="body" rows="10" cols="80" class="txt-body"><$MTMailPreviewExtParam name="body"$></textarea></td>
</tr>

必須項目が空白だったり、ありえない形式のメールアドレスを入力した場合エラーメッセージが表示されました。これは便利ですね～。