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

Payara の Docker を作成する。

この CookBook では、Payara の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Payara の Docker イメージを作成します 実行します 1. …

no image

スクリプト開発でのストアドプロシージャの実行方法

intra-mart Accel Platform 2017 Winter(8.0.18) より SharedDatabase, TenantDatabase に executeCallable AP …

no image

No.5 外部サイトの定期監視

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、LogicDesignerからIM-FormaDesigner / IM-BIS / IM …

no image

フォーム内の入力値を案件名に自動入力する方法

このCookbookでは、IM-FormaDesignerで作成した申請画面から入力内容を案件名に設定する方法を紹介します。 この方法を利用するとIM-FormaDesignerの入力内容をIM-Wo …

no image

e Builder から Payara を起動する方法

この CookBook では、e Builder から Payara を起動する方法について紹介しています。 レシピ External Tools を表示します。 Program を追加します。 Pr …

まだデータがありません。

RSSRSSRSSRSS