jQuery Validation Plugin 簡単な使い方まとめ

jQuery Validation Pluginの簡単な使い方まとめです。
http://jqueryvalidation.org/

#基本形式

javascript

$("form").validate({
	rules: {
		"menu[]" :{
			required: true
		},
		date :{
			require_from_group: [1, ".date_group"]
		}
	},
	messages: {
		"menu[]":{
			required: "ご希望のメニューを選択してください"
		},
		date :{
			require_from_group: "日時を選択してください。"
		}
	}
});

rulesにはそれぞれのname属性に対するチェック項目を決められます。
チェックボックスなんかで「name="menu[]"」としている場合は
「"menu[]":{}」という感じで囲ってあげてください。
messagesにはそれぞれのチェック項目に対するエラー内容（テキスト）をいれます。

#focusした後に何もせずblurした場合もチェックする

javascript-jquery.validate.js

if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {

↓↓↓↓↓↓

if ( !this.checkable( element ) ) {

デフォルトだと、ルールに「required」が設定されていても、
focusした後に何もせずblurした時にチェックしてくれません。
なので、上のように、「jquery.validate.js 」内のソースを修正すれば、
ちゃんとチェックしてくれるようになります。

#エラー表示位置を変える場合

javascript

errorPlacement: function(error, element) {
	element.before( error );
}

デフォルトでは指定したエレメントの後にエラーが入りますが、
「errorPlacement」でエレメントの前にも表示可能です。

#チェックボックスのvalidation

javascript

$('input[type="checkbox"]').on('click', function() {
	$('form').validate().element( this );
});

デフォルトでは、チェックボックスに「required」をつけても反応してくれないので、
上記を追加してやると該当エレメントのバリデーションを実行してくれます。
##validationおまけ
$('form').validate();
と書いてやると、フォーム全体のバリデーションが行えます。

#あとからチェック項目を変更

javascript

$( ".foo" ).rules( "add", {
	required: true,
});

ラジオボタンでAが選択したらA'を必須項目にしたい場合等は、
rules("add",{ 追加チェック項目 });
でチェック項目を増やすことができます。
rules("remove",{ 削除チェック項目 });
でチェック項目を減らすこともできます。

#カスタムチェック項目

javascript

$.validator.addMethod("phone", function(value, element) {
	return this.optional(element) || /^[\d,-]+$/.test(value);
}, "数字を入力して下さい");

「$.validator.addMethod」を使って、カスタムチェック項目を作れます。
上記の例は、「数字とハイフンのみの場合OK」という感じです。
電話番号や郵便番号などに使えるかなと思います。