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では、IM-LogicDesignerを利用して、指定したURLのHTMLから正規表現を利用して任意の文字列を取得する方法を紹介します。 JavaScript定義とREST定義を作 …

IM-BloomMaker グラフエレメントの使い方(円グラフ編)

この CookBook では、intra-mart Accel Platform 2019 Winter から利用可能になった IM-BloomMaker の円グラフの活用方法について紹介しています。 …

IM-LogicDesignerを利用して、IM-Workflowの到達処理で任意の参照者を追加する方法

このCookBookでは、LogicDesignerを利用して、IM-Workflowの到達処理で任意の参照者を追加する方法について紹介しています。 承認ノードの到達処理で、申請者を参照者として登録し …

no image

imuiListTableでセルに配置したアイコンから別画面に遷移する方法

このCookBookでは、imuiListTableでセルに配置したアイコンから別画面に遷移する方法について紹介しています。 imuiListTableについての詳細はAPIドキュメントを参照してくだ …

スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法

このCookBookでは、スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法について紹介しています。 Formaの入力チェックプログラムでは以下の2つのチェッ …

RSSRSSRSSRSS