Adobe Flex 3 ヘルプ

検証イベントの操作

Flex で検証イベントを受け取る方法は、2 とおりあります。

  1. 検証対象のコンポーネントによって送出された検証イベントの受け取り

    Flex コンポーネントは、検証結果に応じて、valid イベントまたは invalid イベントを送出します。これによって、検証対象のコンポーネントから送出されたイベントを受け取り、その検証結果に基づいてコンポーネントに対して追加の処理を実行できます。

    イベントリスナーに渡されるイベントオブジェクトは、Event タイプです。例を含む詳細については、コンポーネントの検証イベントの明示的な処理を参照してください。

  2. バリデータによって送出された検証イベントの受け取り

    バリデータはすべて、検証結果に応じて、valid イベントまたは invalid イベントを送出します。これらのイベントを受け取り、その後、バリデータの必要に応じて追加の処理を実行できます。

    イベントリスナーに渡されるイベントオブジェクトは、ValidationResultEvent タイプです。例を含む詳細については、バリデータの検証イベントの明示的な処理を参照してください。

検証イベントを受け取る必要はありません。これらのイベントが発行されると、デフォルトでは、Flex は対象のコンポーネントの境界線色を適切な色に変更し、invalid イベントに対してエラーメッセージを表示するか、valid イベントに対して前のエラーメッセージを非表示にします。

コンポーネントの検証イベントの明示的な処理

検証が失敗したか成功したかによって、コンポーネントに追加の処理を実行することができます。その場合、valid イベントと invalid イベントを任意で処理することができます。次の例では、検証が失敗した場合に追加処理を実行するために、invalid イベントのイベントリスナーを定義します。

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

    <mx:Script>
        <![CDATA[

            // Import event class.
            import flash.events.Event;
            
            // Define vars for storing text colors.
            private var errorTextColor:Object = "red";
            private var currentTextColor:Object;
    
            // Initialization event handler for getting default text color.  
            private function myCreationComplete(eventObj:Event):void {           
                currentTextColor = getStyle('color');
            }
    
            // For an invalid event, change the text color. 
            private function handleInvalidVal(eventObject:Event):void {
                setStyle('color', errorTextColor);
            }

            // For a valid event, restore the text color.   
            private function handleValidVal(eventObject:Event):void {
                setStyle('color', currentTextColor);
            }
        ]]>
    </mx:Script>

    <mx:PhoneNumberValidator source="{phoneInput}" property="text"/>

    <mx:TextInput id="phoneInput" 
        initialize="myCreationComplete(event);" 
        invalid="handleInvalidVal(event);" 
        valid="handleValidVal(event);"/>
    <mx:TextInput id="zipInput"/>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

バリデータの検証イベントの明示的な処理

バリデータによって送出された valid イベントおよび invalid イベントを明示的に処理するには、次の例に示すように、イベントリスナーを定義します。

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

    <mx:Script>
        <![CDATA[

            // Import event class
            import mx.events.ValidationResultEvent;
            
            private function handleValid(event:ValidationResultEvent):void {
                if(event.type==ValidationResultEvent.VALID)  
                    submitButton.enabled = true;
                else
                    submitButton.enabled = false;
            }

            // Submit form is everything is valid. 
            private function submitForm():void {
                // Handle submit.
            }

        ]]>
    </mx:Script>

    <mx:ZipCodeValidator 
        source="{inputZip}" property="text" 
        valid="handleValid(event);" 
        invalid="handleValid(event);"/>

    <mx:TextInput id="inputZip"/> 
    <mx:TextInput id="inputPn"/> 

    <mx:Button id="submitButton" 
        label="Submit"  
        enabled="false"
        click="submitForm();"/>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

この例では、TextInput フィールドに有効な郵便番号が入力されない限り、Button コントロールは有効になりません。イベントオブジェクトの type プロパティは、検証結果に基づいて、ValidationResultEvent.VALID または ValidationResultEvent.INVALID のいずれかになります。

イベントリスナー内では、ValidationResultEvent クラスのすべてのプロパティを使用できます。これには次のようなプロパティがあります。

field 

検証に失敗しイベントをトリガしたフィールドの名前を示すストリング。



message 

検証によって作成されたすべてのバリデータエラーメッセージを含むストリング。



results 

検証されたフィールドごとに ValidationResult オブジェクトを 1 つずつ含む配列。検証が成功した場合、ValidationResultEvent.results Array プロパティは空になります。検証に失敗した場合、ValidationResultEvent.results Array プロパティには、バリデータがチェックしたフィールド(検証に失敗したフィールドと合格したフィールドの両方)ごとに 1 つずつの ValidationResult オブジェクトが含まれます。ValidationResult.isError プロパティを調べれば、フィールドが検証に合格したか失敗したかを判別できます。



 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート