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」という感じです。
電話番号や郵便番号などに使えるかなと思います。