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

intra-martを初めて使う開発者が、まずは e Builder で「Hello world!」する方法

e Builder は、intra-mart Accel Platform で動作するアプリケーションを開発するための開発支援ツールです。 このレッスンでは、intra-martを初めて使う開発者が …

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

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

no image

スマートフォン版スケジュール画面から添付ファイルをダウンロードする方法

このCookBookでは、「intra-mart Accel Collaboration」のスケジュール機能において、スマートフォン版の画面から添付ファイルをダウンロードできるようにする方法について紹 …

no image

共通マスタのアカウント更新を契機に、IMBoxグループに参加させる方法(IM-LogicDesigner トリガ定義)

このCookBookでは、共通マスタのアカウント更新を契機に、IMBoxのGroupBoxに参加させる方法を紹介します。 IM-LogicDesignerのトリガ定義を利用することで、ノンプログラミン …

画面アイテム「グリッドテーブル」で全行クリアする方法

このCookBookでは、IM-BISの画面アイテムであるグリッドテーブルで、入力データを全行クリアする方法について紹介します。 「グリッドテーブル」は、jqGridを利用しており、入力されたデータを …

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

RSSRSSRSSRSS