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

フォームに入力した内容をデータベースに登録する

登録フォームに入力した内容をデータベースに登録する手順をご紹介します。 今回は例として、CookBook:スクリプト開発で登録フォームを作成するで作成した登録フォームに入力された内容をデータベースに登 …

no image

特定フローの特定ノードで、処理中の案件に対し、任意の処理対象者を追加する方法

このCookBookでは、LogicDesignerを利用して、特定フローの特定ノードで、処理中の案件に対し、任意の処理対象者を追加する方法について紹介しています。 人事異動で担当者が追加となり、複数 …

no image

ワークスペースカレンダーアイテムでスケジュール機能と連携したスケジュールを登録する方法

このCookBookでは、intra-mart Accel Collaboration ワークスペースのワークスペースカレンダーについて紹介しています。 intra-mart Accel Collab …

スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法

このクックブックでは、スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法をご紹介します。 ポートレットは、スプレッドシートとIM-Workflow REST APIを利用して作成し …

no image

imuiListTableで複数選択した行データを取得する方法

このCookBookでは、imuiListTableで複数選択した行データを取得する方法を紹介します。 imuiListTableについての詳細はAPIドキュメントを参照してください。 [imuiLi …

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

RSSRSSRSSRSS