バリデーションチェック

Validationとは、入力フィールドに入力された値が、一定の規則にしたがっているかをチェックする機能です。

Curlでは、このチェックをサーバ側ではなくクライアント側で行うことが可能です。全てのフォームを入力して[送信]ボタンを押したら間違いが・・・・というような状況を回避し、ユーザーエクスペリエンスの向上を実現することが可能です。

ここでは、個別フィールドに対してのValidationチェックを紹介していきます。

個別アイテムのValidationチェック

 まずは、色々な検証フィールドを見てみましょう

||数値検証
{let numeric-val:TextField =
    {TextField
        width = 3cm,
        {validate-with
            {NumericValidator},
            message = “年齢は数値で記入してください。”
        }
    }
}
||文字列検証
{let string-val:TextArea =
    {TextArea
        height = 3cm,
        width = 3cm,
        {validate-with
            {StringValidator max-chars=30},
            message = “コメントは30文字以内です。”
        }
    }
}

Curlでの検証機能には、validate-with プロシージャを使用します。その中で、Validatorクラスの引数を指定して、検証する法則を決定します。

上記の検証では、1つ目が数値(NumericValidator)、2つ目が文字列の検証(StringValidator)を行っています。文字列では、最小文字数(min-chars)や、最大文字数(max-chars)を設定することが可能です。

では、次の例を見てみましょう

||正規表現検証
{let phone-val:TextField =
    {TextField
        width = 3cm,
        {validate-with
            {RegExpValidator.from-ValidationPattern ValidationPattern.ja-phone-number},
            message = “電話番号が不正です。”,
            dialog-on-finished? = true
        }
    }
}

||正規表現検証2
{let md:MessageDisplay = {MessageDisplay}}
{let email-val:TextField =
    {TextField
        width = 3cm,
        message-display = md,
        {validate-with
            {RegExpValidator.from-ValidationPattern ValidationPattern.email-address},
            message = “メールアドレスが不正です。”
        }
    }
}
||ドメイン検証
{let md2:MessageDisplay = {MessageDisplay}}
{let domain-val:TextField =
    {TextField
        width = 3cm,
        message-display = md2,
        {validate-with
            {DomainValidator {StandardDateDomain}},
            message = “日付は、[日/月/西暦]の形式で記入してください。”
        }
    }
}

 

RegExpValidator クラスは、正規表現に基づいた検証を行います。今回はfrom-ValidationPatternコンストラクタを使用し、標準APIに組み込まれているValidationPattern という列挙型のクラスを使用しています。正規表現については、[逆引きリファレンス-データ操作-正規表現]をご覧ください。

DomainValidator クラスは、ドメイン(データ型から生成されます。例えばString,int,Time等の型を指します)の検証を行います。今回は日付のみの検証を行うために、StandardDateDomain クラスを使用しています。

以下のサンプルコードをダウンロードして、実際の挙動をお確かめください。(現状では、ValidationPatternのja-phone-numberに携帯電話の番号が対応していませんので、サンプルコードにて携帯電話用を検証可能な正規表現の列挙型を追加しておきました。)

ソースサンプル

色々な検証

関連ヘルプドキュメント

開発者ガイド-グラフィカル ユーザー インターフェイス – ガイアログとコントロール – コントロールにおけるデータ検証

APIリファレンス – CURL.GUI.CONTROL – VALIDATION – validate-with

APIリファレンス – CURL.GUI.CONTROL – VALIDATION – validate-dialog

APIリファレンス – CURL.GUI.CONTROL – VALIDATION – ValidationPattern