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

IM-FormaDesignerで複数のセレクトボックスを連動させて利用する方法

このCookbookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。 この方法は、IM-FormaDesignerのみ導入環境での方法です。 IM-B …

no image

スクリプト開発で利用できる close 関数のご紹介

この CookBook では、スクリプト開発で利用できる close 関数について紹介します。 スクリプト開発では作成した js ファイルの中に init と言う名前の関数を定義すると思いますが、この …

IM-BloomMaker Bulma タイルの利用方法

この CookBook では、 2020 Summer でリリースした Bulma の「タイル」エレメントの利用方法について説明していきます。 「タイル」エレメントは自由にグリッドレイアウトを構築する …

no image

No.1 メールに添付されているExcelファイル読み込み → ワークフロー申請

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、メールサーバと連携し、メールの添付ファイルの内容から自動的にワークフローを申請できます。 …

no image

IMBox に投稿種別を追加する方法(textile)

このCookBookでは、IMBoxに投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミングガ …

RSSRSSRSSRSS