[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

通知方法

検証コントロールによる検証結果を通知する方法として、以下の4つのプロパティを提供しています。それぞれの設定は検証成功時（success）と検証失敗時（fail）のそれぞれに設定することができます。

  • ツールチップ通知(コントロールの周辺にツールチップを表示します。)

  • アイコン通知(コントロールの内側または外側にアイコンを表示します。)

  • コントロール状態による通知(コントロールの枠やテキストの色により通知します。)

  • トースト通知(画面上に一時的に表示されるメッセージにより通知します。)

検証コントロールでは、複数の検証アイテムを配列として登録することができますが、通知設定の設定方法については、それぞれの検証アイテムごとにnotifyプロパティに設定する方法と、すべての検証アイテムに対して有効となるdefaultNotifyプロパティに設定する方法があります。

次のサンプルコードはすべての検証アイテムに対してツールチップ通知を設定する例です。

var gcTextBox1 = new GC.InputMan.GcTextBox(document.getElementById("gcTextBox1"));
var gcTextBox2= new GC.InputMan.GcTextBox(document.getElementById("gcTextBox2"));
var validator1 = new GC.InputMan.GcValidator({
    items: [
        {
            control: gcTextBox1,
            ruleSet: [
                {
                    rule: GC.InputMan.ValidateType.Required
                }
            ],
            validateWhen: GC.InputMan.ValidateWhen.LostFocus
        },
        {
            control: gcTextBox2,
            ruleSet: [
                {
                    rule: GC.InputMan.ValidateType.Required
                }
            ],
            validateWhen: GC.InputMan.ValidateWhen.LostFocus
        },
    ],
    defaultNotify: {
        // ツールチップを表示する                                  
        tip: true
    }
});

ツールチップ

tipプロパティ（boolean／object）を使用して、検証結果を通知するツールチップを表示するかどうかを設定できます。なお、表示の可否だけではなく、表示位置などの細かな設定も可能です。ツールチップの詳細な設定については「ツールチップ通知」サンプルをご覧ください。

image

アイコン

iconプロパティ（boolean／object）を使用して、検証結果を通知するアイコンを表示するかどうかを設定できます。なお、表示の可否だけではなく、表示位置などの細かな設定も可能です。アイコンの詳細な設定については「アイコン通知」サンプルをご覧ください。

image

コントロールの外観

controlStateプロパティ（boolean）を使用して、検証結果に応じてコントロール自体の外観（枠線や文字色等）を変更するどうかを設定できます。このプロパティをtrueに設定した場合、検証成功時には緑、検証失敗時には赤のスタイルがコントロールに適用されます。

image

トースト

toastプロパティ（boolean）を使用して、検証結果を通知するトーストの表示するどうかを設定できます。なお、通知のスタイル、通知の方向や配置位置などを調整する機能もあります。また、通知のレイアウトに適用するテンプレートもこのプロパティから設定可能です。

image