基本形式
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」という感じです。
電話番号や郵便番号などに使えるかなと思います。
0 件のコメント:
コメントを投稿