CookBook

画面UI部品(imuiValidate)のバリデーションメッセージを任意の場所に表示する方法

投稿日:2016-10-14 更新日:

このCookBookでは、画面UI部品のバリデーションメッセージを任意の場所に表示する方法について紹介しています。

intra-mart Accel Platform では、画面上に配置したUI部品のバリデーションを行うAPIを用意しています。
imuiValidate

デフォルトでは、バリデーションメッセージがUI部品の直後に表示されます。
しかし、プルダウンや複数のテキストボックスを並べて表示している場合に、予期しない場所にメッセージが表示されることがあります。
imuiValidate の引数 errorPlacement を使用して、バリデーションメッセージの表示位置を調整してみましょう。

動作環境

完成イメージ

2016-09-14_im_cookbook_113551_01


1. バリデーションを imuiValidate で実装します。
2. 引数 errorPlacement を実装します。
3. バリデーションエラーを発生させて、表示を確認します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

e builder プロジェクト : im_cookbook_113551.zip
imm ファイル : im_cookbook_113551-1.0.0.imm

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/113551/index
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. バリデーションを imuiValidate で実装してください。
  2. 引数 errorPlacement を実装してください。
  3. バリデーションエラーを発生させて、表示を確認してください。

1. バリデーションを imuiValidate で実装してください。

画面上にUI部品を配置してください。
例として、このCookBookでは以下のような部品を配置してみます。

  1. シンプルな1つのテキストボックス
  2. 横に2つ並べたテキストボックス
  3. 単位表示を付けたプルダウン
  4. 横に並べたラジオボタン

バリデーションルールを、以下のように定義してください。

2. 引数 errorPlacement を実装してください。

バリデーションを実行するボタンを配置して、まずはこのまま imuiValidate を実行してみましょう。

バリデーションを実行するとエラーメッセージが表示されますが、表示位置が不適切なため、見た目が悪い画面になってしまいます。

2016-09-14_im_cookbook_113551_02

これを解消するために、メッセージの表示位置を調整する実装を行います。
imuiValidate の errorPlacement を実装します。

このサンプルでは、あらかじめHTMLに入れておいた class="error-placement-last" クラスを検知します。
そのクラスが指定されている場合、エラーメッセージの表示位置を入力項目の最後に設定します。

3. バリデーションエラーを発生させて、表示を確認してください。

実装が終わったら、再度バリデーションを実行するボタンをクリックし、imuiValidate を実行してみましょう。

2016-09-14_im_cookbook_113551_01

エラーメッセージの表示場所が調整されたことが確認できました。

-CookBook
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

承認ノードの画面アイテムに任意の初期値を設定する方法

このCookBookでは、BISワークフローにおいて、承認ノードの画面アイテムに任意の初期値を設定する方法を紹介します。 画面アイテムに任意の初期値を設定する方法としては、画面アイテムプロパティである …

結合処理で「多数決」承認機能を実現する

このCookBookでは、「多数決」承認機能を実現する方法について紹介しています。 完成イメージ 以下の完成サンプルをダウンロードしてご活用ください。 im_logicdesigner-data-14 …

no image

Milkode のご紹介

この CookBook では、Milkode について紹介しています。 intra-mart 開発本部ではソースコード検索エンジンとして Milkode を利用しています。 導入 導入は Instal …

no image

ウォッチ機能のご紹介

このCookBookでは「intra-mart Accel Collaboration」に備わっているウォッチ機能のご紹介です。 各会社様でグループで仕事をする機会が多いと思います。 仕事を行う上で、 …

no image

OAuth2.0 の アクセストークンを Box から取得する方法

このクックブックでは、OAuth2.0 の アクセストークンを Box から取得する方法を説明します。 intra-mart Accel Platformでは、OAuth2.0 の アクセストークンを …

RSSRSSRSSRSS