<?xml version="1.0" encoding="utf-8"?>
  <mx:Application 
          width="560" height="300"
          xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
          xmlns:forms="com.almerblank.rmx.forms.*" xmlns:validators="com.almerblank.libs.flex.validators.*">
          
          <mx:Array id="formValidators">
                  <mx:StringValidator
                          source="{this.tf_username}"
                          property="text"
                          trigger="{this.tf_username}"
                          triggerEvent="change"
                          listener="{this.tf_username}"
                          required="true"
                          requiredFieldError="The user name field is required, please enter a user name."
                          minLength="6"
                          maxLength="20"
                          tooLongError="The user name you entered is too long, please make your user name between 6 and 20 characters."
                          tooShortError="The user name you entered is too short, please make your user name between 6 and 20 characters."
                          />
                  <mx:StringValidator
                          source="{this.tf_password}"
                          property="text"
                          trigger="{this.tf_password}"
                          triggerEvent="change"
                          listener="{this.tf_password}"
                          required="true"
                          requiredFieldError="The password field is required, please enter a password."
                          minLength="6"
                          maxLength="20"
                          tooLongError="The password you entered is too long, please make your password is between 4 and 20 characters."
                          tooShortError="The password you entered is too short, please make your password is between 4 and 20 characters."
                          />
                  <mx:EmailValidator
                          source="{this.tf_email}"
                          property="text"
                          trigger="{this.tf_email}"
                          triggerEvent="change"
                          listener="{this.tf_email}"
                          required="true"
                          requiredFieldError="The email field is required, please fill out your email."
                          invalidCharError="Your email has an invalid character."
                          invalidDomainError="Your email address has an invalid domain."
                          invalidIPDomainError="Your email address has an invalid IP domain."
                          invalidPeriodsInDomainError="There are invalid periods in your email domain."
                          missingAtSignError="Your email is missing an @ sign."
                          missingPeriodInDomainError="Your email domain is missing a period."
                          missingUsernameError="Your email is missing a user name."
                          tooManyAtSignsError="Your email has too many @ signs, please reduce to one @ sign."
                          />
                  <validators:ConfirmTextFieldValidator
                          source="{this.tf_confirmPassword}"
                          property="text"
                          trigger="{this.tf_confirmPassword}"
                          triggerEvent="change"
                          listener="{this.tf_confirmPassword}"
                          required="true"
                          requiredFieldError="The confirm password field is required, please confirm your password."
                          confirmAgainst="{this.tf_password}"
                          fieldsDontMatchError="The passwords do not match, please make sure that both of your passwords are the same."
                          />
                  <validators:ConfirmTextFieldValidator
                          source="{this.tf_confirmEmail}"
                          property="text"
                          trigger="{this.tf_confirmEmail}"
                          triggerEvent="change"
                          listener="{this.tf_confirmEmail}"
                          required="true"
                          requiredFieldError="The confirm email field is required, please confirm your email."
                          confirmAgainst="{this.tf_email}"
                          fieldsDontMatchError="The emails do not match, please make sure that both of your emails are the same."
                          />
          </mx:Array>
          
          <forms:NewMemberForm id="newMemberForm" validators="{this.formValidators}"
                  width="100%" height="100%">
                  
          
                  <mx:FormHeading label="Member Registration"/>
                  
                  <mx:FormItem label="Username:" required="true">
                          <mx:TextInput id="tf_username" change="this.newMemberForm.memberInfo.username = this.tf_username.text" restrict="A-Za-z0-9" maxChars="20"/>
                  </mx:FormItem>
                  <mx:FormItem label="Password:" required="true">
                          <mx:TextInput id="tf_password" displayAsPassword="true" change="this.newMemberForm.memberInfo.password = this.tf_password.text" restrict="A-Za-z0-9" maxChars="20"/>
                  </mx:FormItem>
                  <mx:FormItem label="Confirm Password:" required="true">
                          <mx:TextInput id="tf_confirmPassword" displayAsPassword="true" restrict="A-Za-z0-9" maxChars="20"/>
                  </mx:FormItem>
                  <mx:FormItem label="Email:" required="true">
                          <mx:TextInput id="tf_email" change="this.newMemberForm.memberInfo.email = this.tf_email.text" maxChars="319"/>
                  </mx:FormItem>
                  <mx:FormItem label="Confirm Email:" required="true">
                          <mx:TextInput id="tf_confirmEmail" maxChars="319"/>
                  </mx:FormItem>
                  <mx:FormItem>
                          <mx:Button id="btn_submit" label="Sign up" click="this.newMemberForm.validateForm()"/>
                  </mx:FormItem>
                  
          </forms:NewMemberForm>
          
  </mx:Application>