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では、以前に公開した「ワークフローの一覧を使い分けるには(改訂版)」に関して、お問い合わせいただいた内容を追加してスマートフォン画面でワークフローの一覧の検索条件を付与する方法をご …

no image

Forma標準アプリとIM-LogicDesignerを利用してBISワークフローを一括申請する方法

このCookBookでは、Forma標準アプリとLogicDesignerを利用して、BISワークフローを一括申請する方法を説明します。 完成イメージ ① グリッドテーブルの各行を、それぞれ案件として …

IM-FormaDesignerの複数行アイテムの入力可能な行数を制限する方法

このCookBookでは、IM-FormaDesignerの複数行アイテムの入力可能な行数を制限する方法について紹介しています。 完成サンプル スクリプト適用前 指定した行数以上に改行できます。 スク …

no image

デバッグサーバ起動時に出力されるコンソールの情報をファイル出力する方法

このCookBookでは、e Builder でデバッグサーバの利用時にコンソールに出力された内容を、別途指定したファイルに出力する方法について紹介しています。 完成イメージ 1. 指定したファイルに …

RSSRSSRSSRSS