JaiswalTraining

Get the online training        


Get Best Tutorial on all major programing language


Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              
              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com




Corejava
Servlet
Jsp
Php
Hibernate
Ajax
Web Service
Ejb2.1
Ejb3.0
Struts  
Struts2
JPA
Spring
Ibatis
JSF
JSF2.0
CoreJavaDesignPattern
Jquery
Flex
J2EE-Design-Patterns
Jboss7
Maven







Vadidation

 Flex implements validation  by alerting the user in a friendly manner.

Overview

Type of Validation Machanism
  • Real-Time validation
    • With every keystroke or mouse interaction the application checks to see
      the data is input as expected, or required.
  • Committed-Value validation
    • Similar to real time, except instead of evaluating every keystroke,
      the application waits until the user has filled out the field completely
      and commits his entry (for example, by pressing Enter, or Tab to change fields).
  • Pass-Through validation
    • Usually the result of hitting a submit button, this type of validation passes
      through all the form inputs to make sure everything is validated at once.
  • Scripted validation
    • Using ActionScript you can dynamically create validators,
      and even reuse the same validator on multiple elements.



Built-in validators
  • Flex comes with a number of built-in validators.
 Key properties and functions of the validator component

enabled                       Boolean   true or false. Allows you to toggle whether or not validation is active
required Boolean The minimum number of characters required. If not set, the field is ignored.
requiredFieldError String If required is true, this is the message that is dis-
played to the user. If unspecified, it defaults to a general
message
source Object The object (for example, a TextInput) that you want to validate against.
property String The property (for example, the text property of the Text-Input) of the source object that is checked to validate if the value provided is compliant.
listener Object By default this is what the source is set to. When the
property of the source doesn’t validate, Flex will high-
light the source object, but if you want a different object  highlighted you can use the listener.
valid Function The name of a function you want to call if validation
passes
invalid Function The name of a function you want to call if validation
fails
triggerEvent String The name of the event that we want to cause validation to  execute based on the trigger (for example, a Submit button’s click event).

Example:-A Simple Validator

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Validator source="{username}" property="text" required="true" />
    <mx:Text text="Enter your username:"/>
    <mx:TextInput id="username" />
</mx:Application>

Output:-
  • The validator component highlights a field with a message when validation fails.


Download code

StringValidator
  •  The additional properties that a StringValidator 
tooShortError                       String   A custom message displayed if the input string contains fewer characters than is specified in minLength. 
minLength Number true or false. Is this a field in which the user is
required to provide input?
maxLength Number The maximum number of characters allowed. If not set, the
field is ignored.
tooLongError String A custom message displayed if the input string contains more
characters than is specified in maxLength.
triggerEvent String The name of the event that we want to cause validation to  execute based on the trigger (for example, a Submit button’s click event).

Example: To check if the address's length  isn't less than 5

StringValidator1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:StringValidator source="{address}" minLength="5" property="text" 
                        trigger="{address}" triggerEvent="change"/>
    <mx:Text text="What's your address?"/>
    <mx:TextInput id="address"  />
</mx:Application>

Output:


Download Code

Example:-2-- To check if the character count is within range

StringValidator2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Validators -->
    <mx:StringValidator source="{username}" property="text" 
      minLength="6" trigger="{submitButton}" triggerEvent="click"/>

   

    <mx:Text text="Enter your username:"/>
    <mx:TextInput id="username" />

    <mx:Button label="Submit" id="submitButton"/>
</mx:Application>

Output:-
  • This StringValidator warns the user that the minimum required number of
    characters has not been entered into the field.

Download code

NumberValidator
  • The NumberValidator caters to evaluating numerical information.
  • You can test to verify the input value is neither too big nor too
    small, or perhaps that it should be an integer only, or that it doesn’t contain negative
    numbers.
Properties that are specific to the NumberValidator

allowNegative                       Boolean   Are you allowing negative values? Defaults to true.
negativeError String A custom message alerting the user she has input a
negative value when allowNegative is set to false.
 If not set this field will default to a standard message.
integerError String A custom message alerting the user she input a
decimal when domain is set to int. If not set this
field will default to a standard message.
domain String real or int. Defaults to real. When set to real
the values entered may be decimals
minValue Number The minimum value required. If not set, the field is
ignored.
lowerThanMinError String A custom message alerting the user he has input a value lower than that specified in minValue.
Optional. If not set it will default to a standard too-
low message
maxValue Number The maximum value allowed. If not set, the field is
ignored.
exceedsMaxError String A custom message alerting the user she has input a
value greater than that specified in maxValue.
Optional. If not set it will default to a standard too
great message.
thousandsSeparator String The specified character to indicate thousands sepa-
ration. Default is a comma.
separationError String A custom message alerting the user he has used a
different character to indicate thousands separa-
tion. Optional. If not set it will default to a standard
message regarding this error.

Example:- To check age withing range

numbervalidator.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:NumberValidator 
      source="{age}" property="text" allowNegative="false"
      negativeError="age cannot  be negative!"
      minValue="5" maxValue="110" domain="int"
      trigger="{submitButton}" triggerEvent="click"
      />
    <mx:Text text="what is your age:"/>
    <mx:TextInput id="age" />
    <mx:Button label="Submit" id="submitButton"/>
</mx:Application>

Output:-
  • entering age greater than min range.

  • entering age greater than max range.

  • entering negative age.


Downoload Code

DateValidator
  • Basic properties of a DateValidator
allowedFormatChars                       String   A series of characters allowed in the date to separate day, month, and year.
For example, /. will allow for
“12/31/2008” and “12.31.2008”. Defaults to /\-..
invalidCharError String The message displayed when characters in the date
don’t match those specified in allowedFormatChars.
inputFormat String A String defining the date format, or the order in
which day, month, and year will appear.
For example,
“mm/dd/yyyy”, “yyyy/mm/dd”, and so on. The enforcement of delineation is still determined by
allowedFormatChars. 
formatError String The message displayed when the date entered doesn’t match the format allowed by inputFormat.
validateAsString Boolean true or false. Treat the source as a free-form text
field? This defaults to true. If set to false it
assumes the source property is a Date object (a
DateField control).
lowerThanMinError String A custom message alerting the user he has input a value lower than that specified in minValue.
Optional. If not set it will default to a standard too-
low message
maxValue Number The maximum value allowed. If not set, the field is
ignored.
exceedsMaxError String A custom message alerting the user she has input a
value greater than that specified in maxValue.
Optional. If not set it will default to a standard too
great message.
thousandsSeparator String The specified character to indicate thousands sepa-
ration. Default is a comma.
separationError String A custom message alerting the user he has used a
different character to indicate thousands separa-
tion. Optional. If not set it will default to a standard
message regarding this error.

Example:- checking valid date of birth

DateValidator.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:DateValidator 
      source="{birthday}" property="text" inputFormat="dd/mm/yyyy"
      allowedFormatChars="/"
      trigger="{submitButton}" triggerEvent="click"/>
    <mx:Text text="Enter your birth date:"/>
    <mx:TextInput id="birthday" />
    <mx:Button label="Submit" id="submitButton"/>
</mx:Application>

Output:-
  • When entering "-" instead of "/" seprator.


  • When enter in mm/dd/yy format instead of dd/mm/yy format.

Download code


 Multifield DateValidator properties
  • In a real world application, you’d want to use the DateField or DateChooser controls
    to capture a date from the user.

daySource                   Object   The object (the name specified in the id property of a
TextInput control) against which you want to validate the day
dayProperty String The property (the text property of the TextInput) of the daySource object that is checked to validate if the value provided is compliant. Defaults to the text property
dayListener Object By default this is what the daySource is set to. When the
dayProperty of the daySource doesn’t validate, Flex will
highlight the daySource object, but if you want a different
object highlighted you can use the dayListener.
wrongDayError String The message displayed when the number entered for the day isn’t a day in the given month. Optional. If not set will display a default message.

monthSource                   Object   The object (the name specified in the id property of a
TextInput control) against which you want to validate the month
monthProperty String The property (the text property of the TextInput) of the monthSource object that is checked to validate if the value provided is compliant. Defaults to the text property
monthListener Object By default this is what the monthSource is set to. When the
monthProperty of the monthSource doesn’t validate, Flex will highlight the monthSource object, but if you want a different object highlighted you can use the monthListener.
wrongMonthError String The message displayed when the number entered isn’t between 1 and 12. Optional. If not set will display a default message.

yearSource                   Object   The object (the name specified in the id property of a
TextInput control) against which you want to validate the year
yearProperty String The property (the text property of the TextInput) of the yearSource object that is checked to validate if the value provided is compliant. Defaults to the text property
yearListener Object By default this is what the yearSource is set to. When the
yearProperty of the yearSource doesn’t validate, Flex will highlight the yearSource object, but if you want a different object highlighted you can use the yearListener.
wrongYearError String The message displayed when the number entered isn’t between 0 and 9999. Optional. If not set will display a default message.

Example:--Identifying a date split across multiple inputs

DateValidator1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
    <mx:DateValidator 
      monthSource="{month}" monthProperty="value" 
      daySource="{day}" dayProperty="value"
      yearSource="{year}" yearProperty="text"      
      trigger="{submitButton}" triggerEvent="click"/>
    <mx:Text text="Month:"/>
    <mx:NumericStepper id="month" />
    <mx:Text text="Day:"/>
    <mx:NumericStepper id="day" />
    <mx:Text text="Year:"/>
    <mx:TextInput id="year"/>
    <mx:Button label="Submit" id="submitButton"/>
</mx:Application>

Output:-
  • It can be used to validate the separate form
    inputs that make up the complete date

  • The DateValidator is a convenient way to validate single text date entries, or dates
    that are captured in separate fields.
Download code

EmailValidator
  • The EmailValidator is fairly thorough in its verification and checks everything
    from making sure you have an @ sign to verifying there is a proper domain suffix.
Properties of the EmailValidator

invalidCharError                   String   Allows you to specify an alert message to display
if an email address contains an invalid character, such as a space. If not set, it will default to a  standard message.
invalidDomainError String Allows you to specify the message to display
when the domain doesn’t appear correct. If not set, it will default to a standard message
invalidIPDomainError String Similar to invalidDomainError, but used
when there is an error in the IP address. If not
set, it will default to a standard message.
invalidPeriodsInDomainError String Allows you to specify the message to display
when there are periods in incorrect places within the address, (usually caused by having more
than one side-by-side). If not set, it will default to a standard message.
missingAtSignError String Allows you to specify the message to display
when the @ character is missing from the
address. If not set, it will default to a standard
message.
missingUserName String Allows you to specify the message to display if
the user didn’t specify the username portion of
the email address (the part to the left of the @
sign). If not set, it will default to a standard mes-
sage.
tooManyAtSignsError String Allows you to specify the message to display if
more than one @ sign is present in the address.
If not set, it will default to a standard message.

Example:-Checking valid email address

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
    <mx:EmailValidator source="{email}" property="text"
      invalidCharError="invalid characters in  Email"
      trigger="{submitButton}" triggerEvent="click"/>
    <mx:Text text="Email:"/>
    <mx:TextInput id="email"/>
    <mx:Button label="Submit" id="submitButton"/>
</mx:Application>

Output:-






Download Code

PhoneNumberValidator
  • This is a simple validator indeed.
  • Itcan recognize numbers originating internationally, as well as in North America.
  • You only need to look for two things: 
    • The number must contain at least ten digits,
    • And any formatting characters you use must be valid.
  • Properties of PhoneNumberValidator
allowedFormatChars                   String   Specifies the permitted characters with which to format
the number. Defaults to ()- .+.
invalidCharError String Allows you to specify a custom message to display if the
number contains a character outside those listed in
allowedFormatChars. If not set this field will
default to a standard error message.
wrongLengthError String Allows you to specify a custom message to display if the
phone number isn’t at least ten digits in length. If not
set, a default error message will be displayed.

Example:-

PhoneNumberValidator.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:PhoneNumberValidator
      source="{phone}" property="text" 
      trigger="{submitButton}" triggerEvent="click"    />
    <mx:Text text="Enter Your contact number"/>
    <mx:TextInput id="phone" />
    <mx:Button label="Submit" id="submitButton"/>
</mx:Application>

Output:-




Download Code

Real-time validation
  • To validate in real time, to catch input mistakes as they happen, requires that you “listen”
    for each change that occurs when data is input.
  • To do that, we want to monitor the change trigger event as shown below
  • Use change event to trigger validation
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:StringValidator 
      source="{username}" property="text" 
      minLength="3" maxLength="15"
      trigger="{username}" triggerEvent="change" 
      tooShortError="name minimum  3 characters"
      tooLongError="name is greater tan 15 character"      
      />
    <mx:Text text="Enter your username:"/>
    <mx:TextInput id="username" />

</mx:Application>

  • The moment the user starts typing, the field will turn red until the minimum required
    number of characters (five) has been entered as shown below.

Download Code

Committed value validation
  • Instead of validating on every keystroke, you might prefer to validate as the user commits their value.
  •  This can occur when the Tab, Enter, or any of the arrow keys are pressed, or the mouse is
    clicked on another component.
  • In order to do this we need to change the triggerEvent from change to valueCommit:
<mx:StringValidator source="{username}"
property="text" minLength="3" maxLength="15"
      trigger="{username}" triggerEvent="change" 
      tooShortError="name minimum  3 characters"
      tooLongError="name is greater tan 15 character" 
             trigger="{username}" triggerEvent="valueCommit"/>


Pass-through validation

  • It is the more passive approach.
  • The Submit button is the usual paradigm in such a case, and to make that happen
  • We change the trigger and triggerEvent attributes so they don’t default to wherever
    we source is pointed, but instead to the click event of a button instance.
  • In order to do this we need to change the triggerEvent  to click:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Validators -->
    <mx:StringValidator source="{username}" property="text" 
      minLength="6" trigger="{submitButton}" triggerEvent="click"/>

    <mx:EmailValidator source="{email}" property="text"
      trigger="{submitButton}" triggerEvent="click"/>
      
    <mx:Text text="Email:"/>
    <mx:TextInput id="email"/>

    <mx:Text text="Enter your username:"/>
    <mx:TextInput id="username" />

    <mx:Button label="Submit" id="submitButton"/>
</mx:Application>
  • Validators are set up for the form fields
  • Validate on the button click
  • Input form fields have validators
Output-




Download code

Scripted validation
  • You can validate a value whenever you want using scripted validation.
  • You can  use the ActionScript version when you want to reuse the
    same validator to check many values.
  •  Those values don’t need to be user input controls; you can use them
    to validate anything.
Example:-Using ActionScript to validate values.

Scriptedvalidator.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <!-- Validators -->
  
  <mx:Script>
    <![CDATA[
      import mx.validators.StringValidator;       
      import mx.controls.Alert;                         
      import mx.events.ValidationResultEvent;     
      
      public var stringVal:StringValidator = new StringValidator();     
      public function validateForm():void  
      {
        var valResult:ValidationResultEvent;
        stringVal.source = username;        
        stringVal.property = "text";        
        stringVal.minLength=6;                
        
        
        
        valResult = stringVal.validate();
        if(valResult.type == "invalid")
        {
          Alert.show("Invalid Username.")
        }
        
      }
    ]]>
  </mx:Script>
  
  <mx:Text text="Enter your username:"/>
  <mx:TextInput id="username" />
  
  <mx:Button label="Submit" id="submitButton" click="validateForm()"/>
</mx:Application>

Output:-
  • when user enter the name whose length is not in specified range.
   
 
 
Download Code