<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/ -->
<s:Application name="Spark_Form_Validator_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.validators.Validator;
 
            protected function resetBtn_clickHandler(evt:MouseEvent):void {
                username.text = "";
                password1.text = "";
                password2.text = "";
                username.errorString = "";
                password1.errorString = "";
            }
 
            protected function submitBtn_clickHandler(evt:MouseEvent):void {
                Validator.validateAll(valArr);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Array id="valArr">
            <mx:StringValidator source="{username}" property="text" required="true" minLength="4" />
            <mx:StringValidator source="{password1}" property="text" required="true" minLength="4" />
        </fx:Array>
    </fx:Declarations>
 
    <s:Form id="frm" defaultButton="{submitBtn}" backgroundColor="#EEEEEE">
        <s:FormHeading label="Spark Form Heading" backgroundColor="haloSilver" />
        <s:FormItem sequenceLabel="1." label="Username:">
            <s:helpContent>
                <s:Label text="user@domain.com" />
            </s:helpContent>
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:">
            <s:helpContent>
                <s:Label text="weak" color="red" />
            </s:helpContent>
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:helpContent>
                <s:HGroup>
                    <s:Label text="One" color="red" />
                    <s:Label text="Two" color="blue" />
                </s:HGroup>
            </s:helpContent>
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" click="resetBtn_clickHandler(event);" />
            <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event);" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/ -->
<mx:Application name="StringUtil_trim_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .errorTip {
            borderColor: haloBlue;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.TextInput;
            import mx.utils.StringUtil;
            import mx.validators.Validator;
 
            private function trimStr(evt:FocusEvent):void {
                var ti:TextInput = TextInput(evt.currentTarget);
                ti.text = StringUtil.trim(ti.text);
            }
 
            private function validateForm():void {
                var errors:Array = Validator.validateAll(validatorArray);
                if (errors.length) {
                    Alert.show("Form is somehow invalid.", "INVALID");
                } else {
                    Alert.show("Form is valid.", "VALID");
                }
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="validatorArray">
        <mx:StringValidator id="firstNameValidator"
                source="{firstName}"
                property="text"
                required="true" />
        <mx:StringValidator id="lastNameValidator"
                source="{lastName}"
                property="text"
                required="true" />
        <mx:EmailValidator id="emailValidator"
                source="{email}"
                property="text"
                required="true" />
    </mx:Array>
 
    <mx:Form>
        <mx:FormItem label="First name:" required="true">
            <mx:TextInput id="firstName" focusOut="trimStr(event);" />
        </mx:FormItem>
        <mx:FormItem label="Last name:" required="true">
            <mx:TextInput id="lastName" focusOut="trimStr(event);" />
        </mx:FormItem>
        <mx:FormItem label="Email:" required="true">
            <mx:TextInput id="email" focusOut="trimStr(event);" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Submit" click="validateForm();" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/13/validating-flex-forms-using-the-validator-classes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    verticalAlign="middle"
    backgroundColor="white"
    creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.validators.Validator;
            import mx.events.ValidationResultEvent;
            import mx.validators.ZipCodeValidatorDomainType;
            import mx.controls.Alert;
 
            [Bindable]
            private var validatorArr:Array;
 
            private function init():void {
                validatorArr = new Array();
                validatorArr.push(shippingName_stringValidator);
                validatorArr.push(shippingAddress1_stringValidator);
                validatorArr.push(shippingCity_stringValidator);
                validatorArr.push(shippingState_numberValidator);
                validatorArr.push(shippingZipCode_zipCodeValidator);
                validatorArr.push(shippingZipCode_stringValidator);
            }
 
            private function validateForm(evt:MouseEvent):void {
                var validatorErrorArray:Array = Validator.validateAll(validatorArr);;
                var isValidForm:Boolean = validatorErrorArray.length == 0;
                if (isValidForm) {
                    Alert.show("The form is valid!", "Valid form...");
                } else {
                    var err:ValidationResultEvent;
                    var errorMessageArray:Array = [];
                    for each (err in validatorErrorArray) {
                        var errField:String = FormItem(err.currentTarget.source.parent).label
                        errorMessageArray.push(errField + ": " + err.message);
                    }
                    Alert.show(errorMessageArray.join("\n\n"), "Invalid form...", Alert.OK);
                }
            }
 
            private function resetForm(evt:MouseEvent):void {
                shippingName.text = "";
                shippingAddress1.text = "";
                shippingAddress2.text = "";
                shippingCity.text = "";
                shippingState.selectedIndex = -1;
                shippingZipCode.text = "";
            }
        ]]>
    </mx:Script>
 
    <mx:XMLList id="statesXMLList">
        <state label="California" data="CA" />
        <state label="Oregon" data="OR" />
    </mx:XMLList>
 
    <mx:StringValidator id="shippingName_stringValidator"
        source="{shippingName}"
        property="text"
        minLength="2" />
 
    <mx:StringValidator id="shippingAddress1_stringValidator"
        source="{shippingAddress1}"
        property="text"
        minLength="2" />
 
    <mx:StringValidator id="shippingCity_stringValidator"
        source="{shippingCity}"
        property="text"
        minLength="2" />
 
    <mx:NumberValidator id="shippingState_numberValidator"
        source="{shippingState}"
        lowerThanMinError="This field is required."
        property="selectedIndex"
        minValue="0" />
 
    <mx:ZipCodeValidator id="shippingZipCode_zipCodeValidator"
        source="{shippingZipCode}"
        property="text"
        requiredFieldError="Please enter a zip code in ZIP+4 format."
        domain="{ZipCodeValidatorDomainType.US_ONLY}"  />
 
    <mx:StringValidator id="shippingZipCode_stringValidator"
        source="{shippingZipCode}"
        property="text"
         tooShortError="Please enter a zip code in ZIP+4 format."
        minLength="10" maxLength="10" />
 
    <mx:Form>
        <mx:FormHeading label="Shipping Information" />
        <mx:FormItem required="true" label="Name">
            <mx:TextInput id="shippingName" maxChars="96" />
        </mx:FormItem>
        <mx:FormItem required="true" label="Address">
            <mx:TextInput id="shippingAddress1" maxChars="128" />
        </mx:FormItem>
        <mx:FormItem label="">
            <mx:TextInput id="shippingAddress2" maxChars="128" />
        </mx:FormItem>
        <mx:FormItem required="true" label="City">
            <mx:TextInput id="shippingCity" maxChars="128" />
        </mx:FormItem>
        <mx:FormItem required="true" label="State">
            <mx:ComboBox id="shippingState" prompt="Please select a State..." selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" />
        </mx:FormItem>
        <mx:FormItem required="true" label="ZIP Code">
            <mx:TextInput id="shippingZipCode" maxChars="10" restrict="0-9 \-" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:HBox>
                <mx:Button label="Submit" click="validateForm(event)" />
                <mx:Button label="Reset" click="resetForm(event)" />
            </mx:HBox>
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>