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>

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