jquery validateを使ったチェックにおいて通常の「input type=”text”」では自由に必須項目（required）の設定は簡単だが、複数選択が可能なチェックボックスにおいて必須項目の設定をしたい場合、同じやり方ではうまくいかない。サイトによってはjquery validateで「チェックボックスの必須項目は設定出来ない」と書いてあるところもあるが、チェックボックスの必須項目設定も可能。

テキストボックスでの必須項目設定とエラー表示は

<input type="text" size=50 name="name" class="required">
name:{required: "お名前を入力してください"},

のようにする。

チェックボックスの場合

例えば以下のようなフォームにおいてjquery validateを使ったチェックを行い、いずれか１つを選択することを条件にしたい時、

<input type="checkbox" name="lesson[]" value="1">1回目<br>
<input type="checkbox" name="lesson[]" value="2">2回目<br>
<input type="checkbox" name="lesson[]" value="3">3回目<br>
<input type="checkbox" name="lesson[]" value="4">4回目<br>

テキストボックスの時と同じようにしてnameであるlesson[]等を記載し

lesson[]:{required: "レッスンを選択してください"},

のようにするとエラーとなり失敗する。
[]を使う時は「’」「”」で囲み

'lesson[]':{required: "受講希望日を選択してください"},

とすれば良い。

htmlとjavascriptのサンプルは以下

JAVASCRIPT・HTML

(function(){
	var rules = {
		'lesson[]': {required: true}
	};
	var messages = {
		'lesson[]':{required: "受講希望日を選択してください"}
	};
	$(function(){
		$('#form').validate({
			rules: rules,
			messages: messages,
			errorPlacement: function(error, element){
				if (element.attr("name") == "lesson" ) error.insertAfter("#lesson_err");
			}
		});
	});
})();

<input type="checkbox" name="lesson[]" value="1">1回目<br>
<input type="checkbox" name="lesson[]" value="2">2回目<br>
<input type="checkbox" name="lesson[]" value="3">3回目<br>
<input type="checkbox" name="lesson[]" value="4">4回目<br>
<div id="lesson_err"></div>

何もチェックしなかった場合「lesson_err」の位置に「受講希望日を選択してください」が表示される。