フルーツショップ †
顧客からの受注を登録する業務アプリケーションのサンプルです。このサンプルでは LiveValidation プラグインでユーザからの入力をリアルタイムで検証し、エラーメッセージを表示する機能が使用されています。
アプリケーション画面 †
Internet Explorer 8 以降のブラウザでは動作保障外となりました。
操作方法 †
[受注登録] タブ †
- [顧客コード] テキストボックスに顧客コード (半角数字 4 ケタ) を入力して [検索] ボタンを押下すると、顧客情報 (データは架空のものです) が表示されます。
- [商品コード] テキストボックスに商品コード (半角英大文字 1 ケタ + 半角数字 2 ケタ) を入力して検索ボタンを押下すると、商品情報 (データは架空のものです) が表示されます。
- [顧客コード]、[商品コード] テキストボックスの隣にある [?] ボタンを押下すると入力補助ダイアログが表示されます。
- [数量] テキストボックスに数量を入力して [追加] ボタンをクリックすると、[受注明細] グリッドに明細行が 1 行追加されます。
- 注文を続ける場合は [商品コード]、[数量] の入力を繰り返します。注文を確定する場合は [受注登録] ボタンを押下します。
[受注一覧] タブ †
- [更新] ボタンを押下すると受注情報一覧が更新されます。
[マスタ管理] タブ †
- 新しく登録したい顧客の情報を登録します。各テキストボックスには以下の入力値検証ルールが設定されており、キーボード入力時やフォーカス取得・喪失時に即時検証が実行されます。
- 顧客名: 入力必須
- 郵便番号: 入力必須、文字数 (7文字)、正規表現 (数字7ケタ)、独自ルール (東京都の郵便番号)
- 住所: 入力必須
- 電話番号: 入力必須、正規表現 (数字およびハイフン)
- FAX番号: 正規表現 (数字およびハイフン)
- 担当者名: 入力必須
- [登録ボタン] を押下すると上記のルールが一括検証されます。いずれかの項目にエラーがある場合にはアラートダイアログが表示され、登録処理が中止されます。
- すべての入力項目でエラーがなければ顧客情報の登録が行われ、登録完了メッセージが表示されます。