[Flex 3] 로그인폼에서 입력이 잘못 되었을 때 버튼을 제어하는 예제 소스

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/ValidationUsable/index.html"
    width="500" height="250"
    defaultButton="{submitButton}"
    creationComplete="creationCompleteHandler();">
    <mx:Script>
        <![CDATA[
            import mx.validators.Validator;
            import mx.events.ValidationResultEvent;
            import mx.controls.Alert;
 
            [Bindable]
            public var formIsValid:Boolean = false;

            [Bindable]
            public var formIsEmpty:Boolean = true;
   
            // Holds a reference to the currently focussed
            // control on the form.
            private var focussedFormControl:DisplayObject;
                                 
            // Validate the form
            private function validateForm(event:Event):void
            {                   
                // Save a reference to the currently focussed form control
                // so that the isValid() helper method can notify only
                // the currently focussed form control and not affect
                // any of the other form controls.
                focussedFormControl = event.target as DisplayObject;   

                // Mark the form as valid to start with               
                formIsValid = true;           

                // Check if form is empty
                formIsEmpty = (nameInput.text == "" && emailInput.text == ""
                    && phoneInput.text == "");

                // Run each validator in turn, using the isValid()
                // helper method and update the value of formIsValid
                // accordingly.
                validate(nameValidator);               
                validate(phoneValidator);
                validate(emailValidator);
            }
    
             // Helper method. Performs validation on a passed Validator instance.
             // Validator is the base class of all Flex validation classes so
             // you can pass any validation class to this method. 
             private function validate(validator:Validator):Boolean
             {               
                // Get a reference to the component that is the
                // source of the validator.
                 var validatorSource:DisplayObject = validator.source as DisplayObject;
               
                // Suppress events if the current control being validated is not
                // the currently focussed control on the form. This stops the user
                // from receiving visual validation cues on other form controls.
                var suppressEvents:Boolean = (validatorSource != focussedFormControl);
               
                // Carry out validation. Returns a ValidationResultEvent.
                // Passing null for the first parameter makes the validator
                // use the property defined in the property tag of the
                // <mx:Validator> tag.
                var event:ValidationResultEvent = validator.validate(null, suppressEvents);
                               
                // Check if validation passed and return a boolean value accordingly.
                 var currentControlIsValid:Boolean = (event.type == ValidationResultEvent.VALID);
                
                 // Update the formIsValid flag
                 formIsValid = formIsValid && currentControlIsValid;
                
                 return currentControlIsValid;
              }
             
              // Event handler: Gets called when all child components
              // have been created.
              private function creationCompleteHandler():void
              {
                // Set the focus on the first field so
                // user does not have to mouse over to it.
                // Note that the user still has to click on the
                // Flex application to give it focus. This is
                // a currently limitation in Flex.
                  resetFocus();
              }
           
            // Submit form if everything is valid.
            private function submitForm():void
            {
                Alert.show("Form Submitted!");
            }
           
            // Clear the form and reset validation.
            private function clearFormHandler():void
            {
                // Clear all input fields.
                nameInput.text = "";
                phoneInput.text = "";
                emailInput.text = "";
               
                // Clear validation error messages.
                nameInput.errorString = "";
                phoneInput.errorString = "";
                emailInput.errorString = "";
               
                // Flag that the form is now clear
                formIsEmpty = true;
               
                // Set the focus on the first field so
                // user does not have to mouse over to it.
                resetFocus();              
            }
           
            // Helper method. Sets the focus on the first field so
            // user does not have to mouse over to it.
            private function resetFocus():void
            {
                focusManager.setFocus(nameInput);
            }
        ]]>
    </mx:Script>

    <!--
        Validators
    -->
   
    <!-- Name must be longer than 2 characters long -->
    <mx:StringValidator
        id="nameValidator"
        source="{nameInput}"
        property="text"
        minLength="2"
    />
   
    <!-- Validate phone number -->
    <mx:PhoneNumberValidator
        id="phoneValidator"
        source="{phoneInput}" property="text"
    />
   
    <!-- Validate email -->
    <mx:EmailValidator
        id="emailValidator"
        source="{emailInput}" property="text"
    />

    <!--
        User interface
    -->
    <mx:Panel title="Phone number validator">       
        <mx:Form>
            <mx:FormItem label="Name:">
                <mx:TextInput
                    id="nameInput"
                    change="validateForm(event);"
                />
            </mx:FormItem>
            <mx:FormItem label="Phone: ">
                <mx:TextInput
                    id="phoneInput"
                    change="validateForm(event);"
                />
            </mx:FormItem>
            <mx:FormItem label="Email: ">
                <mx:TextInput
                    id="emailInput"
                    change="validateForm(event);"
                />
            </mx:FormItem>
        </mx:Form>
        <mx:ControlBar horizontalAlign="center">
            <mx:Button
                id="submitButton"
                label="Submit"
                enabled="{formIsValid}"
            />
            <mx:Button
                label="Clear form"
                enabled="{!formIsEmpty}"
                click="clearFormHandler();"
            />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>