検証エラーの操作 -- Flex 2.01

Flex のユーザーインターフェイスコンポーネントを含む、UIComponent 基本クラスのサブクラスは、通常、境界線の色を変更してエラーメッセージを表示することで、検証の失敗を処理します。検証が成功した場合は、コンポーネントは既存の検証エラーメッセージを非表示にし、境界線を除去します。

このセクションでは、エラーメッセージのコンテンツの設定方法と、検証エラーの表示特性について説明します。

サブトピック

エラーメッセージの設定

Flex のバリデータでは、そのすべてでデフォルトのエラーメッセージが定義されています。ほとんどの場合、これらのメッセージは任意でオーバーライドできます。

すべてのバリデータのデフォルトエラーメッセージは、アプリケーションのローカライズの一部として簡単に変更できるように、リソースバインディングを使用して定義されています。バリデータクラスから作成されたすべてのバリデータオブジェクトのエラーメッセージのデフォルト値は、そのクラスに関連付けられたリソースバンドルを編集することでオーバーライドできます。

特定のバリデータオブジェクトのエラーメッセージを編集するには、バリデータのプロパティにストリング値を書き込みます。たとえば、PhoneNumberValidator では、入力された電話番号の桁数が違うことを示すデフォルトのエラーメッセージを定義します。特定の PhoneNumberValidator オブジェクトのデフォルトのエラーメッセージをオーバーライドするには、次の例に示すように、新しいメッセージストリングを wrongLengthError プロパティに割り当てます。

<?xml version="1.0"?>
<!-- validators\PNValidatorErrMessage.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define the PhoneNumberValidator. -->
    <mx:PhoneNumberValidator id="pnV" 
        source="{phoneInput}" property="text"
        wrongLengthError="Please enter a 10-digit number."/>

    <!-- Define the TextInput control for entering the phone number. -->
    <mx:TextInput id="phoneInput"/>
    <mx:TextInput id="zipCodeInput"/>
</mx:Application>

検証エラーメッセージの色の変更

デフォルトでは、マウスポインタをユーザーインターフェイスコントロール上に重ねたときに表示される検証エラーメッセージの背景色は赤です。次の例に示すように、ErrorTip スタイルを使用して色を変更できます。

<?xml version="1.0"?>
<!-- validators\PNValidatorErrMessageStyle.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Use blue for the error message. -->
    <mx:Style>
        .errorTip { borderColor: #0000FF}
    </mx:Style>

    <!-- Define the PhoneNumberValidator. -->
    <mx:PhoneNumberValidator id="pnV" 
        source="{phoneInput}" property="text"
        wrongLengthError="Please enter a 10-digit number."/>

    <!-- Define the TextInput control for entering the phone number. -->
    <mx:TextInput id="phoneInput"/>
    <mx:TextInput id="zipCodeInput"/>
</mx:Application>

この例では、エラーメッセージは薄い緑色で表示されます。

errorString を使用した検証エラーの表示

UIComponent クラスで定義されている errorString プロパティを使用すると、実際にバリデータクラスを使用しなくてもコンポーネントの検証エラーを表示できます。UIComponent.errorString プロパティにストリング値を書き込むと、検証エラーを示す赤い境界線がコンポーネントの周りに描画されます。バリデータによって検証エラーが検出された場合と同様に、マウスポインタをコンポーネント上に移動すると、そのストリングが検証エラーメッセージとしてツールヒントに表示されます。

検証エラーをクリアするには、UIComponent.errorString プロパティに空のストリング ("") を書き込みます。

カスタムの ToolTip コントロールの作成に関する詳細については、ツールヒントの使用を参照してください。

検証エラーのクリア

errorString プロパティは、検証のソースとなるフィールドをリセットし、そのフィールドのリセット時に検証エラーが発生しないようにする場合に役立ちます。

たとえば、ユーザー入力を収集するフォームを提供するものとします。フォーム内で、ユーザーがフォームをリセットするためのボタンなどのメカニズムも提供できます。ただし、バリデータに関連付けられたフォームフィールドをクリアすると、検証エラーがトリガされます。次の例では、TextInput コントロールの text プロパティのリセットの一部として errorString プロパティを使用し、フォームのリセット時に検証エラーが発生しないようにします。

<?xml version="1.0"?>
<!-- validators\ResetVal.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

    <mx:Script>
        <![CDATA[

            import mx.events.ValidationResultEvent;
            private var vResult:ValidationResultEvent;
            
            // Function to validate data and submit it to the server. 
            private function validateAndSubmit():void {
                // Validate the required fields. 
                vResult = zipV.validate();
                if (vResult.type==ValidationResultEvent.INVALID) 
                    return;
        
                // Submit data to server.
            }

            <!-- Clear the input controls and the errorString property 
                when resetting the form. -->
            private function resetForm():void {
                zipInput.text = '';
                zipInput.errorString = '';
            }
        ]]>
    </mx:Script>

    <mx:ZipCodeValidator id="zipV" 
        source="{zipInput}" 
        property="text"/>

    <mx:Form>
        <mx:FormItem label="Enter ZIP code">
            <mx:TextInput id="zipInput"/>
        </mx:FormItem>
        <mx:FormItem label="Enter Country">
            <mx:TextInput id="cntryInput"/>
        </mx:FormItem>
    </mx:Form>

    <!-- Trigger submit. -->
    <mx:Button label="Submit" click="validateAndSubmit();"/>
    
    <!-- Trigger reset. -->
    <mx:Button label="Reset" click="resetForm();"/>
</mx:Application>

この例では、フォームアイテムをクリアする関数が、各アイテムに関連付けらている errorString プロパティもクリアし、検証エラーをすべてクリアします。

検証のリスナーの指定

すべてのバリデータで listener プロパティがサポートされています。検証が実行されると、listener プロパティで指定されたオブジェクトに対して、Flex によって視覚的な変更が適用されます。

デフォルトでは、listener プロパティが source プロパティの値に設定されます。つまり、検証イベントに反映させるビジュアル的な変更はすべて、検証対象のコンポーネント上で実行されます。ただし、次の例に示すように、コンポーネントを検証して、その検証結果を別のコンポーネントに適用する場合があります。

<?xml version="1.0"?>
<!-- validators\SetListener.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

    <mx:ZipCodeValidator id="zipV" 
        source="{zipCodeInput}" 
        property="text"
        listener="{errorMsg}"/>

    <mx:TextInput id="zipCodeInput"/> 
    <mx:TextArea id="errorMsg"/>
</mx:Application>