CookBook

imuiValidateでhiddenの隠し要素をバリデーションする方法

投稿日:

このCookBookでは、imuiValidateでhiddenの隠し要素をバリデーションする方法について紹介しています。
今回は閉じられたimuiGadgetBar 内の入力項目に対して、クライアントサイドでの適切なバリデーションを実装しましょう。

im_cookbook_113078_01

バリデーションに関しては以下の記事を参考にしてください。

完成イメージ


1. 入力項目には何も入力しないでください。
2. 「Registration」ボタンをクリックすることでバリデーションが動作します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
e builder プロジェクト : im_cookbook_113078_hidden_validate.zip
imm ファイル : im_cookbook_113078_hidden_validate-8.0.0.imm

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

レシピ

  1. 隠し要素を含むフォームを作成してください。
  2. 作成したフォームに対してimuiValidateを実装してください。
  3. バリデーションメッセージの表示位置を調整してください。

1. 隠し要素を含むフォームを作成してください。

今回は以下のように imuiGadgetBar を利用した登録フォームを作成してください。

「Default name」と「Amount of money」を必須入力項目としています。

imuiGadgetBar についてはAPIドキュメントを参照してください。

2. 作成したフォームに対してimuiValidateを実装してください

スクリプト開発した画面にバリデーション(入力チェック)を実装する を参考に、作成したフォームに対してimuiValidateを実装してください。

ただし、imuiGadgetBarが閉じられているときのようにバリデーション対象が隠されている場合は上記の記事の方法ではバリデーションされません。

その場合はimuiValidateの第4引数に空文字を指定してください。こうすることでhiddenの要素に対してもバリデーションが行われます。

im_cookbook_113078_01

hiddenの要素に対してもバリデーションを行うことができました。

3. バリデーションメッセージの表示位置を調整してください

「2. 作成したフォームに対してimuiValidateを実装してください」では、imuiGadgetBar が閉じられている場合でもバリデーションが実施されるようになりました。

しかし、このままでは imuiGadgetBar の中にバリデーションのメッセージが表示されます。

ユーザにわかりやすいようにメッセージの表示位置を imuiGadgetBar の外に表示します。

以下のように、imuiValidate の第5引数にエラーメッセージの表示位置を決める function を指定してください。

上記はバリデーション対象が「Default name」である場合、IDが gadget-bar である要素の前にエラーメッセージを表示し、それ以外はバリデーション対象の要素の後ろにエラーメッセージを表示するようにしています。

im_cookbook_113078_02

メッセージの表示位置を変更することで imuiGadgetBar が閉じられていてもエラーの内容がわかるようになりました。

-CookBook
-

執筆者:


comment

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

関連記事

no image

Formaのスクリプトから処理対象者を制御するには

このCookBookでは、スクリプトを利用してIM-Workflowの動的ノード(動的承認、縦配置、横配置)の処理対象者を制御する方法をご紹介します。 スクリプトから動的処理対象者設定機能を利用するこ …

ワークフローの案件削除時にBIS/Formaの関連データも削除する方法

このCookBookでは、ワークフローの案件削除時にBIS/Formaの関連データも併せて削除する方法について紹介しています。 BIS/Formaで作成したワークフローには、機能ごとに個別で管理するト …

no image

IM-BIS アクション設定の「条件」の書き方

このCookbookでは、アクション設定の条件式の書き方を説明します。 この方法により入力値に応じてアクション設定の外部連携や入力モード変換などのイベントの実行をコントロールすることができます。 完成 …

no image

BISやFormaのテーブルにCSVファイルからのインポート・エクスポートを行うには

このCookbookでは、明細テーブルやグリッドテーブルとCSVファイルを連携する方法を紹介します。 この方法を活用することにより、明細テーブルやグリッドテーブルへの入力の手間を軽減できます。 完成イ …

no image

Docker Swarm を利用して Resin のクラスタリングを構築する。

この CookBook では、Docker Swarm を利用して Resin のクラスタリングを構築する手順について紹介しています。 Docker Swarm を利用することで、複数マシンにまたがっ …

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

RSSRSSRSSRSS