actionscript-3 - Flex 条件付き検証

Question

mxml ファイルの 3 つのフィールドを検証しようとしています。2 つは必須ですが、1 つは不要です。何かが入力された場合にのみ検証したい郵便番号フィールド。空白の場合は、他の 2 つの必須フィールドが正しく設定されている限り、[送信] ボタンを有効にできるようにします。コード：

<mx:EmailValidator id="emailValidator" 
                       property="text" source="{ownerName}"
                       valid="emailValidator_validHandler(event)"
                       invalid="emailValidator_validHandler(event)"/>
    <mx:ZipCodeValidator id="zipCodeValidator"
                         property="text" source="{zip}"
                         required="false"
                         valid="zipCodeValidator_validHandler(event)"
                         invalid="zipCodeValidator_validHandler(event)"/>

    <mx:Validator id="roomNameValidator" 
                  property="text" source="{roomName}"
                  valid="roomNameValidator_validHandler(event)"
                  invalid="roomNameValidator_validHandler(event)"/>
        [Bindable]
        private var isRoomNameValid:Boolean;
        [Bindable]
        private var isOwnerValid:Boolean;
        [Bindable]
        private var isZipValid:Boolean;

        protected function emailValidator_validHandler(event:ValidationResultEvent):void
        {
            isOwnerValid = (event.type==ValidationResultEvent.VALID);
        }

        protected function zipCodeValidator_validHandler(event:ValidationResultEvent):void
        {
            isZipValid = (event.type == ValidationResultEvent.VALID);
        }
        protected function roomNameValidator_validHandler(event:ValidationResultEvent):void
        {
            isRoomNameValid = (event.type==ValidationResultEvent.VALID);
        }

次に、送信ボタンの有効なプロパティを設定しようとしました:

 enabled = "{isOwnerValid && isRoomNameValid &&amp zip.text.length>0?isZipValid:true}"

しかし、うまくいきません。郵便番号フィールドに赤い境界線が表示されていても、郵便番号フィールドに不正なデータを送信できます。

Answer 1

編集：私の以前の提案は、無限ループを引き起こした可能性があります:-)

次のように、テキスト ボックスの change メソッドを使用して検証を実行することをお勧めします。

protected function changeHandler(event:Event):void
{
    submitButton.enabled = Validator.validateAll(validators.source);
}

<mx:ArrayCollection id="validators">
    <mx:EmailValidator id="emailValidator"
                   property="text" source="{ownerName}" />        
    <mx:ZipCodeValidator id="zipCodeValidator"
                   property="text" source="{zip}"
                   required="false" />
    <mx:Validator id="roomNameValidator" 
                   property="text" source="{roomName}" />
</mx:ArrayCollection>

<mx:Label text="Owner Name:" />
<mx:TextInput id="ownerName" change="changeHandler(event)" />
<mx:Label text="Zip Code:" />
<mx:TextInput id="zip" change="changeHandler(event)" />
<mx:Label text="Room Name:" />
<mx:TextInput id="roomName" change="changeHandler(event)" />
<mx:Button id="submitButton" label="Submit" enabled="false" />

Answer 2

これはあなたの質問には答えませんが、ある種の MVC の使用を真剣に検討することをお勧めします。有効にした関数のロジックにはすべて、コードの匂いがあります。

Answer 3

まず、郵便番号は必須ではないため、次のように初期化する必要がありますtrue。

[バインド可能] var isZipValid:Boolean = true;

---

ここに解決策があります：

protected function zipCodeValidator_validHandler(event:ValidationResultEvent):void
{
    isZipValid = (zip.text.length == 0) || (event.type == ValidationResultEvent.VALID);
}

次に、送信ボタンで

enabled = "{isOwnerValid && isRoomNameValid && isZipValid}"

---

別の解決策は次のとおりです: zip 郵便番号が空でない場合にのみバリデーター自体を有効にする必須の場合は、それを true に初期化する必要があります。

<mx:ZipCodeValidator id="zipCodeValidator"
                 property="text" source="{zip}"
                 required="false"
                 valid="zipCodeValidator_validHandler(event)"
                 invalid="zipCodeValidator_validHandler(event)"
                 enabled="{zip.text.length > 0}"/>

[バインド可能] var isZipValid:Boolean = true;