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 では以下の方法を紹介します。 テナント環境セットアップでテナント固有の属性を登録する方法。 システム管理者のテナント管理画面で、テナント固有の属性を編集する方法。 今回は「外部 …

no image

スレッドダンプの取り方

このCookBookでは、スレッドダンプの取り方について紹介しています。 以下に手順を説明しますが、スレッドダンプは必ず問題の事象が発生している時に取得してください。 例えば、動作が重い・非同期処理が …

IM-BloomMaker でリモートワークの報告メールを送信するアプリを作ってみた

はじめに IM-BloomMaker と IM-LogicDesigner で「リモートワークの報告メールを送信するアプリ」を作成したので、公開します。 新型コロナウィルスによる緊急事態宣言を受けて、 …

no image

IM-Notice Broker の設定方法

この CookBook では、分散環境での IM-Notice (デスクトップ版)の設定方法について紹介しています。 分散環境の構成として、以下のような 2 台構を考えます。 マシン IPアドレス A …

no image

ワークスペース機能におけるイベントカレンダーの利用例

このCookBookでは「intra-mart Accel Collaboration」ワークスペース機能におけるイベントカレンダーの利用例について紹介しています。 intra-mart Accel …