CookBook

スクリプト開発した画面にバリデーション(入力チェック)を実装する

投稿日:2015-12-14 更新日:

このCookBookでは、作成した画面項目に対してバリデーション(入力チェック)を設定する方法をご紹介します。
今回はスクリプト開発で登録フォームを作成するで作成した画面項目に対して、クライアントサイドでの適切なバリデーションを実装しましょう。

109003_validation_sample

完成イメージ

<操作方法>


1. 「商品名」には何も入力しないでください。
2. 「金額」に整数以外の値を入力してください。
3. 「備考」に201文字以上入力してください。
4. 「登録」ボタンをクリックすることでバリデーションが動作します。

なお、以下は入力項目ごとに割り当てたバリデーションルールです。

入力項目 バリデーション内容
商品名 必須
金額 必須・整数のみ
備考 200文字まで

完成サンプル

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

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

レシピ

  1. プレゼンテーションページでバリデーション用のライブラリをロードします
  2. バリデーションルールを定義します
  3. プレゼンテーションページでバリデーションルールをロードします
  4. バリデーションしたいフォームに対してimuiValidateを実装します

では、それぞれのステップを細かく見ていきましょう。

1. プレゼンテーションページでバリデーション用のライブラリをロードします

このCookBookでは、製品が提供しているAPIであるimuiValidateを利用してバリデーションを実装しましょう。 imuiValidateは内部でjQuery Validation Pluginを利用しています。プレゼンテーションページ(edit.html)のヘッダ部分に以下を記述してください。

2. バリデーションルールを定義します

バリデーションルールを定義しましょう。今回は src/im_cookbook/sample1/validators/validator.js という新しいjsファイルを作成し記述してください。

上記のパラメータ名は、プレゼンテーションページ内のinputタグのname属性の値と対応しています。
このように、プレゼンテーションページとは別のjsファイルにバリデーションルールを定義しておくことで、登録画面や編集画面で同じルール定義を使いまわすことができます。

この他にも多数のバリデーションルールを用意しています。 詳しくは以下のドキュメントを参照してください。

上記で作成したバリデーションルールオブジェクトは、次のステップでプレゼンテーションページからロードされます。

3. プレゼンテーションページでバリデーションルールをロードします

2. で作成したバリデーションルールをプレゼンテーションページにロードしましょう。
プレゼンテーションページのヘッダ部に以下を記述しましょう。

上記のimartタグは、im_cookbook/sample1/validators/validator.jsinitオブジェクトをルールとしてロードし、rulesというルール定義オブジェクトとmessagesというメッセージ情報オブジェクトがクライアントサイドに出力されます。

rulesオブジェクトとmessagesオブジェクトを利用して、次のステップでバリデーションを実装。

詳しくは以下のドキュメントを参照してください。

4. バリデーションしたいフォームに対してimuiValidateを実装します

今回は、登録ボタンがクリックされたときにバリデーションが行われるように実装しましょう。

バリデーションを実行しているimuiValidateについて見てみます。

上記の例では、formというIDを持つフォームに対して、rulesというバリデーションルールに基づきバリデーションしています。バリデーションに失敗した場合はfalseを返し、messagesで指定したエラーメッセージを表示しています。

現時点では、以下のように不適切な場所にエラーメッセージが表示されます。

109003_errorPlacement1

しかし、imuiValidateのAPIドキュメント内サンプルを応用し以下のように実装すると、適切な場所にエラーメッセージが表示されます。

109003_errorPlacement2

-CookBook
-,

執筆者:


  1. […] スクリプト開発した画面にバリデーション(入力チェック)を実装する 691 views […]

  2. […] スクリプト開発した画面にバリデーション(入力チェック)を実装する […]

  3. […] スクリプト開発した画面にバリデーション(入力チェック)を実装する […]

comment

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

関連記事

「イベント」ボタン・「一覧へ戻る」ボタンを使用し任意の遷移先を設定する

このCookBookでは、IM-FormaDesignerの画面アイテム・ボタンを使用し、任意の画面に遷移する方法について紹介しています。 設定方法は下記の2パターンです。 「イベント」ボタンを使用す …

スプレッドシートでSpreadJSライブラリを利用してFormaの画面に対して入力チェックを実行する方法

このCookBookでは、スプレッドシートでSpreadJSライブラリを利用して入力チェックを実行する方法について紹介しています。 SpreadJSライブラリはクライアントサイドで動作するため、サーバ …

IM-BISの処理画面でIMBoxのチャットを利用してコミュニケーションする方法

このCookBookでは、IM-BISの処理画面でIMBoxのチャットを利用してコミュニケーションする方法を紹介しています。 本稿では、案件単位にIMBoxのダイレクトメッセージ(以降DM)を作成し、 …

IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する方法について紹介しています。 人事異動を重ねることで、未処理案件の中には …

申請一覧画面のブックマークを事前に登録する方法

このCookBookでは、申請一覧 のブックマークを事前に登録する方法をご紹介します。 ブックマークは、以下のテーブルにデータを登録することで設定できます。 imw_t_bookmark_flow ブ …

RSSRSSRSSRSS