intra-mart Accel Kaiden! / プログラミングガイド

第2版 2014-08-01

«  4.2.2.8. マスタ検索部品   ::   コンテンツ   ::   4.2.2.10. ガジェット間通信  »

4.2.2.9. バリデーション

intra-mart Accel Kaiden! におけるクライアントバリデーションは、”jQuery Validation Plugin”を拡張しています。
本項では、クライアントバリデーションの実装方法などを紹介します。

4.2.2.9.1. バリデーションルールの指定と実行

プロジェクトコードテキストボックスに対して、必須と最大文字数(100文字)のバリデーションを指定しています。
<k:codeText name="projectCd"
            mode="0"
            surfaceKey="プロジェクトコード"
            validationSave="{k_required:[''], k_maxLength:[100]}"/>
すべてのガジェットに対して後述のバリデーションキー”save”のバリデーションを実行しています。
var result = KAIDEN.gadgetMan.validate("save");

コラム

バリデーションを実行させるためには、対象エレメントが<form>内に配置されている必要があります。

4.2.2.9.2. バリデーションキー

バリデーションキーは、バリデーションの単位を管理するもので、例えば保存と下書き保存とで異なるバリデーションを行いたい場合に有効です
たとえば以下は、”save”というバリデーションキーと、”draft”というバリデーションキーでそれぞれ異なるバリデーションを指定しています。
<k:codeText name="projectCd"
            mode="0"
            surfaceKey="プロジェクトコード"
            validationSave="{k_required:[''], k_maxLength:[100]}"
            validationDraft="{k_maxLength:[100]}"/>
バリデーションを実行する場合には、KAIDEN.gadgetMan.validate()の引数にバリデーションキーを渡すことでそれぞれ異なるバリデーションを実行できます。
// 保存ボタン押下時の処理
var resultDefaultValidate = KAIDEN.gadgetMan.validate("save");

// ~ 略 ~

// 下書き保存ボタン押下時の処理
var resultDraftValidate   = KAIDEN.gadgetMan.validate("draft");

コラム

JPS(タグリブ)で指定するバリデーションキーは、validation + バリデーションキーの形式をとります。
javascriptでバリデーションを実行する場合は、バリデーションキーはすべて小文字にして指定します。

4.2.2.9.3. バリデーションのエスカレーション

上記では、保存・下書き保存とで異なるバリデーションを指定しましたが、k_maxLength:[100]に関してはどちらも共通して行うチェックになっています。
こういったチェックを冗長的に記載しなくても良いような仕組みを用意しています。

以下のように”default”には、共通的なチェックを指定して、その差異だけそれぞれのバリデーションで指定します。
<k:codeText name="projectCd"
            mode="0"
            surfaceKey="項目コード"
            validationDefault="{k_maxLength:[100]}"
            validationSave="{k_required:['']}"
            validationDraft=""/>
バリデーションを実行する際には、KAIDEN.gadgetMan.validate()の第二引数にtrueを指定します。
すると、指定したバリデーションキーのバリデーションに加え”default”のバリデーション内容も併せて実行します。
// 保存ボタン押下時の処理
var resultDefaultValidate = KAIDEN.gadgetMan.validate("save", true); //必須、最大文字(100文字)の順でバリデーションが実行されます

// ~ 略 ~

// 下書き保存ボタン押下時の処理
var resultDraftValidate   = KAIDEN.gadgetMan.validate("draft", true); //最大文字(100文字)のみバリデーションが実行されます

4.2.2.9.4. 独自バリデーションの作成

独自のバリデーションを作成する場合には、バリデーション自体を登録するKAIDEN.validator.addValidateMethod()とエラーメッセージを登録するKAIDEN.validator.setInvalidMessage()とを利用します。

KAIDEN.validator.addValidateMethod("バリデーションrule", function(value, element, param) {
  var rv = true;
  //バリデーション内容 ※falseを返却するとエラーとなります。
  return rv;
});
KAIDEN.validator.setInvalidMessage("バリデーションrule", function(arg, element) {
  return KAIDEN.validator.formatMessage("エラーメッセージ", element);
});

コラム

KAIDEN.validator.formatMessage()は、以下のようなエラーダイアログに表示されるように最適化されています。
../../../_images/validation_error_dialog.png

コラム

KAIDEN.validator.formatMessage()の第三引数にパラメータを指定することで、メッセージの置換文字列({0}や{1})を置換することができます。

4.2.2.9.5. バリデーションの項目名

エラーダイアログに、下図の四角で囲んだ部分はエラーのあった項目名を表示しています。
../../../_images/validation_error_dialo_closeup.png
この項目名は、テキストボックス等のsurfaceKeyプロパティが利用されます。
<k:codeText name="projectCd"
            mode="0"
            surfaceKey="項目コード"
            validationDefault="{k_maxLength:[100]}"
            validationSave="{k_required:['']}"
            validationDraft=""/>

コラム

surfaceKeyは国際化対応項目のため、キーを指定するとプロパティファイルなどから名称を生成できます。

«  4.2.2.8. マスタ検索部品   ::   コンテンツ   ::   4.2.2.10. ガジェット間通信  »