cakePHP画面開発しております。
ちょっと複雑な画面になってきて、チェックボックスをコントロールしたり、複数条件でのバリデートが入ってきたので
jQueryとプラグインを活用しています。javascriptによるクライアント側でのバリデートに便利なプラグインを導入しました。
ダウンロードはこちらから
利用にはjQueryが必要です。jQueryは、ループが不要でDOM内のエレメントをIDやタグ、クラスで引っ張ってきて簡単に更新が出来て
すごく便利です。書式も簡略化しているし、軽いのもいいですね。
さてvalidateプラグインを導入してフォーム内のバリデートを行うのですが、通常用意されているルールだけでは足りず
addMethodを利用して複雑な条件を孵化してみたのですがなかなか動きません。
//時刻大小チェックメソッド追加
jQuery.validator.addMethod("checkTime",
function(value, element, params) {
if(params[0]>params[1]){
return true;
} else {
return this.optional(element);
}
},
"時刻の指定が間違っています。"
);
と書いて、時刻を選択するセレクトボックスの内容を渡すため
rules: {
'data[Clinic][fromJikan1]': {
required: "#ClinicJikantai0:checked",
"checkTime": [$("#ClinicFromJikan1").val(),$("#ClinicToJikan1").val()]
},
という風にセレクトボックスのvalueを渡してみたのですが、firebugで確認するとparamsに何も入ってきません。
昨夜はこれではまったままでした。
色々と調べた結果、どうもパラメータで渡せるのは単なる文字列だけみたいで、意味も無くfunctionの返値にしてみたりと
あがいたけどどうもなりませんでした。
結局エレメントのIDを文字列で渡して、メソッド側で処理することで成功しました。
書き直したのはこんな感じ。
jQuery.validator.addMethod("checkTime",
function(value, element, params) {
if (!$(params[2]).attr('checked')){return true;}
if ($(params[0]).val() < $(params[1]).val()) {
return true;
} else {
return this.optional(element);
}
},
"時刻の指定が間違っています。"
);
セットする側は
rules: {
'data[Clinic][fromJikan1]': {
required: "#ClinicJikantai0:checked",
"checkTime": ["#ClinicFromJikan1","#ClinicToJikan1","#ClinicJikantai0"]
},
てことで、無事動作しました。prams[2]にはチェックボックスのIDをいれて、ここにチェックが入ってなければバリデートしないように
しました。
忘れないうちに自分で覚書。