Flex-Form Validation using Validator classes

Problem

          Quick Form Validation Using Validators

Solution

          Validating a form using the StringValidator, NumberValidator, ZipCodeValidator and Validator classes.These are the Flex classes to validate a form. However you can writeyour own validators. Here I have posted a validated form using the validators. Copy and Paste this code to your flex builder to use this application.

Source 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  height="305" width="474" borderStyle="solid" borderThickness="0" cornerRadius="0" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#6C6A6A, #6C6A6A]">
  
    <mx:Model id="checkModel">
        <User>
            <FirstName>{fname.text}</FirstName>
            <LastName>{lname.text}</LastName>
            <DOB>{dob.text}</DOB>
            <Email>{email.text}</Email>
            <Age>{age.text}</Age>
            <Zip>{zip.text}</Zip>
            <Phone>{phone.text}</Phone>
        </User>
    </mx:Model>
  
    <mx:Panel title="Form Container: Moving from one form field to another triggers the validator" layout="absolute"
        color="#D7A200" borderAlpha="0.15" paddingTop="0" paddingRight="10" paddingBottom="10"
         verticalScrollPolicy="off" paddingLeft="10" horizontalAlign="center" borderStyle="solid" cornerRadius="10" x="3" y="3" backgroundColor="#7D7A7A" borderThickness="1" borderColor="#545151" height="297">

        <mx:Form width="100%" color="0x323232" paddingTop="0" x="10" y="0">
            <mx:FormHeading fontSize="10"  label="Enter values into the form." paddingTop="0"  color="#FFFFFF"/>

            <mx:FormItem label="First name" color="#FFFFFF">
                <mx:TextInput id="fname" width="200" color="#000000"/>
            </mx:FormItem>
          
            <mx:FormItem label="Last name" color="#FFFFFF">
                <mx:TextInput id="lname" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="Date of birth (mm/dd/yyyy)" color="#FFFFFF">
                <mx:TextInput id="dob" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="E-mail address" color="#FFFFFF">
                <mx:TextInput id="email" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="Age" color="#FFFFFF">
                <mx:TextInput id="age" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="Zip" color="#FFFFFF">
                <mx:TextInput id="zip" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="Phone" color="#FFFFFF">
                <mx:TextInput id="phone" width="200" color="#000000"/>
            </mx:FormItem>
        </mx:Form>
   
    </mx:Panel>  
    <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
    <mx:StringValidator source="{lname}" property="text" minLength="4" maxLength="12"/>
    <mx:PhoneNumberValidator source="{phone}" property="text"/>
    <mx:DateValidator source="{dob}" property="text"/>
    <mx:EmailValidator source="{email}" property="text"/>
    <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
        minValue="18" maxValue="100" domain="int"/>
    <mx:ZipCodeValidator source="{zip}" property="text"/>
</mx:Application>