You should be aware of some guidelines when performing validation on forms. Typically, you associate forms with data models. That lets you trigger validation as part of binding an input user interface control to a field of the data model. You can also perform some of the following actions:

• If possible, assign validators to all the individual user-interface controls of the form. You can use a validator even if all that you want to do is to ensure that the user entered a value.
• Assign validators to multiple fields when necessary. For example, use the CreditCardValidator or the DateValidator with multiple fields.
• If you have any required fields, ensure that you explicitly call the validate() method on the validator. For more information, see Validating required fields.
• Define a Submit button to invoke any validators before submitting data to a server. Typically, you use the click event of the Button control to invoke validators programmatically, and then submit the data if all validation succeeds.

The following example uses many of these guidelines to validate a form made up of several TextInput controls:

<?xml version="1.0"?>
<!-- validators\FullApp.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 = fNameV.validate();
                if (vResult.type==ValidationResultEvent.INVALID) 
                    return;
        
                vResult = lNameV.validate();
                if (vResult.type==ValidationResultEvent.INVALID) 
                    return;

                // Since the date requires 3 fields, perform the validation 
                // when the Submit button is clicked. 
                vResult = dayV.validate();
                if (vResult.type==ValidationResultEvent.INVALID) 
                    return;
    
                // Invoke any other validators or validation logic to make
                // an additional check before submitting the data.

                // Submit data to server.
            }
        ]]>
    </mx:Script>

    <!-- Define the data model. -->
    <mx:Model id="formInfo">
        <formData>
            <date>
                <month>{monthInput.text}</month>
                <day>{dayInput.text}</day>
                <year>{yearInput.text}</year>
            </date>
            <name>
                <firstName>{fNameInput.text}</firstName>
                <lastName>{lNameInput.text}</lastName>
            </name>
            <phoneNum>{phoneInput.text}</phoneNum>
        </formData>
    </mx:Model>

    <!-- Define the validators. -->
    <mx:StringValidator id="fNameV" 
        required="true"
        source="{fNameInput}" 
        property="text"/>
    <mx:StringValidator id="lNameV" 
        required="true" 
        source="{lNameInput}" 
        property="text"/>
    <mx:PhoneNumberValidator id="pnV"
        source="{phoneInput}" 
        property="text"/>

    <!-- Invoke the DataValidator programmatically. -->
    <mx:DateValidator id="dayV" 
        triggerEvent="" 
        daySource="{dayInput}" dayProperty="text" 
        monthSource="{monthInput}" monthProperty="text" 
        yearSource="{yearInput}" yearProperty="text"/>

    <!-- Define the form to populate the model. -->
    <mx:Form>
        <mx:FormItem label="Month">
            <mx:TextInput id="monthInput"/>
        </mx:FormItem>
        <mx:FormItem label="Day">
            <mx:TextInput id="dayInput"/>
        </mx:FormItem>
        <mx:FormItem label="Year">
            <mx:TextInput id="yearInput"/>
        </mx:FormItem>
        <mx:FormItem label="First name">
            <mx:TextInput id="fNameInput"/>
        </mx:FormItem>
        <mx:FormItem label="Last name">
            <mx:TextInput id="lNameInput"/>
        </mx:FormItem>
        <mx:FormItem label="Phone">
            <mx:TextInput id="phoneInput"/>
        </mx:FormItem>
    </mx:Form>

    <!-- Define the button to trigger validation. -->
    <mx:Button label="Submit"
        click="validateAndSubmit();"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example the following actions occur:

• The associated validator executes whenever the TextInput control dispatches a valueCommit event.
• The click event for the Button control invokes the validateAndSubmit() function to perform final validation before submitting data to the server.
• The validateAndSubmit() function invokes the validators for all required fields.
• The validateAndSubmit() function invokes the DateValidator because it requires three different input fields.
• Upon detecting the first validation error, the validateAndSubmit() function returns but does not submit the data.
• When all validations succeed, the validateAndSubmit() function submits the data to the server.