Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

JavaScript入力コントロール「InputManJS」がアップデート! 新機能で入力フォームを最適化しよう

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

入力内容の検証結果を通知する検証コントロール

 検証コントロールは、入力内容の検証結果を通知するコントロールです。検証コントロールを利用して、入力エラーの理由を利用者へ明確に提示できます。

検証コントロールの基本的な実装

 図2は、未入力時にツールチップでエラー表示する基本的な検証コントロールの例です。

図2 検証コントロールの表示例(p003-validation)
図2 検証コントロールの表示例(p003-validation)

 図2の検証コントロールを設定するには、リスト2の通り、GC.InputMan.GcValidatorのコンストラクターを実行します。コンストラクターの引数に設定内容を指定します。

リスト2 検証コントロールの設定(p003-validation/main.js)
var validator1 = new GC.InputMan.GcValidator({
  items: [ // 検証コントロールの設定 ...(1)
    {
      control: gcTextBox1, // 検証対象のコントロール ...(2)
      ruleSet: [
        {
          rule: GC.InputMan.ValidateType.Required // 検証規則 ...(3)
        }
      ],
      validateWhen: GC.InputMan.ValidateWhen.LostFocus, // 検証方法 ...(4)
      notify: {
        tip: true // 通知方法...(5)
      }
    }
  ]
//, defaultNotify: { // 共通の通知方法を設定する場合に記述 ...(6)
//  tip: true
//}
});

 (1)のitemsは、検証コントロールの設定を格納する配列です。配列内に複数の設定を記述できます。

 検証対象のコントロールを、(2)のcontrolに設定します。検証規則はruleSet配列に複数指定でき、ここでは(3)でRequired(必須入力)を設定しています。InputManJSでは、ほかにOutOfRange(範囲指定)の検証規則が利用できます。OutOfRangeの実装例はサンプルコードを参照してください。独自の検証規則を設定する方法は後述します。

 (4)のvalidateWhenは検証方法の指定で、表2の値が指定できます。LostFocusやTyping以外の任意タイミングで検証するには、検証方法にManualを指定後、GcValidatorオブジェクトのvalidateメソッドで検証を実行します(実装例はサンプルコードを参照)。

表2 検証方法の設定値と設定内容
設定値 設定内容
LostFocus コントロールからフォーカスが外れたときに検証
Manual 手動で検証(validateメソッド実行時)
Typing 入力中リアルタイムで検証

 (5)のnotifyは通知方法の指定で、ここではtips(ツールチップ)が表示されるように設定します。notifyの代わりに、(6)のdefaultNotifyで、itemsに指定された複数の設定に、デフォルトの通知方法をまとめて設定することもできます。

独自検証規則の設定

 検証コントロールでは、独自の検証規則を設定できます。図3のサンプルでは、入力値が偶数であることを検証します。

図3 入力値が偶数であることを検証する例(p003-validation)
図3 入力値が偶数であることを検証する例(p003-validation)

 独自検証規則の設定は、リスト3の通り、ruleに設定する検証関数で行います。検証関数の引数controlでコントロールを受け取って、getValueメソッドで入力値が取得できます。検証結果はtrue/falseで返却します。

リスト3 入力値が偶数である検証の設定(p003-validation/main.js)
rule: function (control) {
  // 偶数ならOK、それ以外ならエラーにする
  return (control.getValue() % 2 == 0);
}

検証結果の通知方法をカスタマイズ

 検証結果の通知方法はさまざまにカスタマイズできます。図4のサンプルで説明します。

図4 検証結果通知方法のカスタマイズ例(p003-validation)
図4 検証結果通知方法のカスタマイズ例(p003-validation)

 検証成功/失敗時のメッセージ文言は、リスト4の通り、ruleSet内のsuccessMessage、failMessageで設定できます。

リスト4 メッセージ文言の設定(p003-validation/main.js)
ruleSet: [
  {
    rule: GC.InputMan.ValidateType.Required,
    successMessage: 'OKです。',
    failMessage: '入力必須です。'
  }
],

 検証成功/失敗時の表示内容は、notifyかdefaultNotifyに、リスト5の通り設定します。リスト2(5)のようにfailやsuccessを明示しないと、検証失敗時の設定になります。

リスト5 検証成功/失敗時の表示内容設定(p003-validation/main.js)
notify: {
  fail: { // 検証失敗時の設定
(通知の形式設定)
  },
  success: {  // 検証成功時の設定
(通知の形式設定)
  }
}

 通知の形式設定には、表3の内容が設定できます。詳細はサンプルコードや公式ドキュメントを参照してください。

表3 通知の形式設定に設定できる内容
設定項目 設定内容
tip ツールチップの表示有無(trueでデフォルト表示)、表示位置や形式
icon アイコンの表示位置(コントロールの中か外か)、アイコン画像
controlState trueにすると文字や枠線の色が検証結果に連動

 図4に示した、検証成功時の通知設定はリスト6の通りです。ツールチップが表示され、アイコンはコントロールの内側に表示、文字や枠線の色が緑色になります。

リスト6 検証成功時の通知設定(p003-validation/main.js)
success: {  // 検証成功時の設定
  tip: true,  // ツールチップを表示する
  icon: { // アイコンをコントロールの内側に表示
    direction: GC.InputMan.IconDirection.Inside
  },
  controlState: true // 文字や枠線の色を連動させる
}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ComponentZine(InputMan)

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5