カテゴリー: プログラム

jQuery.validateで複数項目チェックで複数エラー出力方法

2011年2月20日にアップしていた記事を復活させました。

最近、開発の参考資料を漁るべくググってもドキュメントがあまりない、jQuery.validation を使っての複数項目チェックと複数エラーメッセージ表示についてまとめておきました。

フォームタグでくくっての入力欄を用意しようとした場合、当然のように「名前」「メルアド」「住所」「電話番号」等々、複数項目を入力することを想定してデザインするはず。

それをデータベースに登録する前に、その入力した項目の中にデータベースには登録させたくない文字列があったり、ハッキングを試みるようなデータが入っていたりするとそれをはじくような処理をバリデーションと言うわけですが、それを検出してエラーメッセージを表示させる場所を検討したりデザインする作業はいつも悩ましかったりします。

これをjQuery.validateプラグインでさくっとやってしまおうじゃないかというのが今回のお題目。

しかしJavascriptアレルギーだった私が、今回の開発現場でjQueryすっかり虜になり、その勢いで、複数項目チェックで好きなところに好きなようにエラーメッセージを出力する方法を編み出せたので、参考までにご紹介いたします。サンプルコードも公開しますので、よろしかったら使ってみてください。

function validateJquery( max_length ){
  $("#commnet").validate({
    rules:{
       field1:{
        required : true,
        maxlength : max_length
      },
      field2:{
        required : true,
        maxlength : max_length
      },
      field3:{
        required : true,
        maxlength : max_length
      },
      field4:{
        required : true,
        maxlength : max_length
      }
    },
    messages:{
      field1:{
        required:  message1,
        maxlength: message2
      },
      field2:{
        required:  message3,
        maxlength: message4
      },
      field3:{
        required:  message5,
        maxlength: message6
      },
      field4:{
        required:  message7,
        maxlength: message8
      }
    },
    //表示位置指定
    errorPlacement: function(error, element) {
      switch(element.attr('name')) {
        case "field1":
          error.insertAfter($('#field1_error'));
          break;
        case "field2":
          error.insertAfter($('#field2_error'));
          break;
        case "field3":
          error.insertAfter($('#field3_error'));
          break;
        case "field4":
          error.insertAfter($('#field4_error'));
          break;
        default:
          error.insertAfter(element);
      }
    }
  });
}

function validateJquery( max_length ){

$("#commnet").validate({

rules:{

field1:{

required : true,

maxlength : max_length

field2:{

required : true,

maxlength : max_length

field3:{

required : true,

maxlength : max_length

field4:{

required : true,

maxlength : max_length

}

messages:{

field1:{

required: message1,

maxlength: message2

field2:{

required: message3,

maxlength: message4

field3:{

required: message5,

maxlength: message6

field4:{

required: message7,

maxlength: message8

}

//表示位置指定

errorPlacement: function(error, element) {

switch(element.attr('name')) {

case "field1":

error.insertAfter($('#field1_error'));

break;

case "field2":

error.insertAfter($('#field2_error'));

break;

case "field3":

error.insertAfter($('#field3_error'));

break;

case "field4":

error.insertAfter($('#field4_error'));

break;

default:

error.insertAfter(element);

}

});

}

特に、”errorPlacement”を設定することで、それ以下で指定したidの値のあるタグ位置にエラー出力できるようになりますので、その位置を変えることで自在に出力位置を変更できます。こりゃ便利(^e^)n

ではそのサンプルhtmlを以下に。

<form id="comment">
<input name="field1" type="text" />
<div id="#field1_error"></div>
<input name="field2" type="text" />
<div id="#field2_error"></div>
<input name="field3" type="text" />
<div id="#field3_error"></div>
<input name="field4" type="text" />
<div id="#field4_error"></div>
</form>

</form>

参考にしたドキュメントは「jQuery Validation Pluginメモ」
http://micelle.org/trash/jquery-validation-plugin

Enterキー押下でTab移動したりサブミットする操作を止めるJavascript

ほかから頂戴したJSですけど、実用的なのでここでも紹介します。

document.onkeydown = KeyEvent;
self.focus();
function KeyEvent(e){
pressKey=event.keyCode;
if(pressKey==13){return false;}
}

document.onkeydown = KeyEvent;

self.focus();

function KeyEvent(e){

pressKey=event.keyCode;

if(pressKey==13){return false;}

}

良かったら使ってみて

CakePHP2を美味しく食べたい：$scripts_for_layoutの使い方

この記事は2012年2月14日にアップしたものを復活させました。

画面を作り込んでくると、<head>内で別ファイルのcssやscriptを読み込んで、見栄えや動きをつけてゆくもの。
でも、画面テンプレートを共通化しておくと、「この画面ではこのcssとかjsは不要なんだけど…」でも制作上の都合でそのままにしておきがちかもしれません。小さいファイルであればいいのでしょうが、昨今のJavascriptはJQueryや色々なプラグインなど大きなファイルを読み込ませて動作が重くなりがち。

これを、画面表示で必要な部品（ビュー）を読み込む場合のみ、ヘッダー側で出力してもらうというのがこの$scripts_for_layoutの仕組みです。

使えるようにしておくため、レイアウトファイルの<head>部に
<php? echo $scripts_for_layout;?>
があるか確認。無ければ書き加えましょう。

そして表示させる予定のviewファイルに次のように記述します。

CSSファイルの場合

<?php $this->Html->css(array('hoge/fuga',"fuga",'/hoge'), null, array('inline'=>false)); ?>
この記述の意味を説明すると、味噌は
array('inline'=>false)
この値を指定してあれば、画面出力時に$scripts_for_layoutのある箇所に、cssを読み込むエレメントが出力されるようになっています。

array('hoge/fuga',"fuga",'/hoge')
この記述では３つのcssファイルを読み込ませるためファイルのありかを指定しています
‘hoge/fuga’は/css直下にある/hoge/fuga.cssを指定
‘fuga’は/css直下のfuga.cssを指定
‘/hoge’はルート直下のhoge.cssを指定
しています。
読み込むファイルが１つの場合は
<?php $this->Html->css('hoge', null, array('inline'=>false)); ?>
でもOKです。
ちなみにnullの箇所に文字列を入れるとエレメント出力の際の”rel”値がその文字列になります。ただし、’import’を指定すると<link>ではなく<style>エレメントに変化し読み込み形式が変わります。
※なぜかtrueを指定するとimportと同じ挙動を取るようです。2.0.6で確認しました。

JavaScriptファイルの場合

<?php $this->Html->script(array('script1', 'script2'), array('inline'=>false)); ?>
この記述の意味も上記cssに準じます。

こうしてレイアウトは共通だけれど、表示させるビューによって読み込ませるcssやjsをダイナミックに変更できるため、ページ表現時にいろんなことができそうです。

“$this->set(compact())”が素敵☆CakePHP2を美味しく食べたい

2012年9月17日にこんな記事をアップしていました。

CakePHP2に限ってのことではないので、1.3やほかのフレームワークでも応用できそう。
元ネタサイト：
Stupid CakePHP Controller Tricks（英語）

コントローラーで設定した値をビューに渡す時、
$this->set('hoge', $hoge); $this->set('fuga', $fuga); $this->set('hena', $hena);
というようにして、ビュー側では$hoge,$fuga,$henaとし使いますが、これを
$this->set(compact('hoge','fuga','hena'));
とすると、$hoge,$fuga,$henaとして仕えてしまうというわざ。
素晴らしいです！

【参考】
compact()

ZendFramework2とDoctrine2組み合わせてEntityは自動生成だよね

Zend Framework 2 : Generate Doctrine Entities from Existing Database using DoctrineModule and DoctrineORMModule

ZendFramework2でDoctrine2を使うとき、Entityは手作りしちゃダメだよ。ちゃんとデータベースを参照したものをジェネレートツール使って作りましょうという記事。

ちゃんと作れるようになりたい！だから英語頑張るねん。