BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Using Inbuilt Validators Of Flex in Classic Style

Posted by Shardul Singh Bartwal on December 22, 2007

 Using Inbuilt Validators Of Flex in Classic Style

 classicvalidations.jpeg

In the flex you can find out many inbuilt Validators.But one of the important thing about using them is that if there is any error messaage on the submition of any button than how to fatch the error message related to the validator.Normally it just makes the border of our Input field red and nothing else.If you want to know what the error message than you have to go to that control and only on the mouse over of that you can see.But the most often need is to get the error message related to all input fields in just one Button’s click.Acheving it is very easy.For acheving this just copy and paste the code below.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init()”
 top=”15″ bottom=”15″ left=”15″ right=”15″ horizontalAlign=”center” verticalAlign=”middle” backgroundColor=”#ffffff” cornerRadius=”5″>
<mx:Style>
 Alert {
            color : #0f3177;
   title-style-name :”.alertTitle”;
   header-height:15;
   border-thickness: 1;
   drop-shadow-enabled: true;
   background-color: #ffffff;
   modalTransparency: 0.5;
   corner-radius :6;
   border-style :solid;
   header-colors : #90a4d1, #5970a0;
   footer-colors : #9db6d9, #ffffff;
   border-color : #5970a0;
   drop-shadow-color :#d1ddf7;
            modalTransparencyBlur:4;
            modalTransparencyColor: #DDDDDD;
            modalTransparencyDuration: 1000;
        }
</mx:Style>
<mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.collections.ArrayCollection;
   import mx.managers.CursorManager;
   import mx.validators.*;
   import mx.rpc.events.ResultEvent;
   import mx.events.ValidationResultEvent;
    
   [Bindable]
         private var validatorArr:Array;
       
         private var shipping:Boolean=false;
        
         private function init():void
        {
         validatorArr = new Array;
         validatorArr.push(nameTxtInputVld);
         validatorArr.push(birthDateFieldVld);
         validatorArr.push(emailTxtInputVld);
        } 
       
         private function funValidateForm(event:MouseEvent):void
        {
              var validatorErrorArr:Array = Validator.validateAll(validatorArr);
              var isValidForm:Boolean = validatorErrorArr.length==0;
              if(isValidForm)
              {
              Alert.show(“Validation Successful”,”Validation Summary !”);
     nameTxtInput.text=””;
              birthDateField.text=””;
              emailTxtInput.text= “”;
       }
        else
        {
          var err:ValidationResultEvent;
         var errorMessageArray:Array=[];
         for each (err in validatorErrorArr)
         {
           var errField:String = FormItem
           (err.currentTarget.source.parent.parent).label
           errorMessageArray.push(err.message);
         }
         Alert.show(errorMessageArray.join(“\n”),”Validation Summary !”);
             }
          }  
   ]]>
</mx:Script>
 <mx:StringValidator id=”nameTxtInputVld” source=”{nameTxtInput}” minLength=”3″ maxLength=”20″ property=”text” required=”true” requiredFieldError=”Please Enter Name.” tooShortError=”There should be minimum 3 characters in first name.”/>
 <mx:StringValidator id=”birthDateFieldVld” source=”{birthDateField}”  property=”text” required=”true” requiredFieldError=”Please Enter Birth Date.”/>
 <mx:EmailValidator  id=”emailTxtInputVld” source=”{emailTxtInput}” property=”text” required=”true” requiredFieldError=”Please Enter Email Address.” tooManyAtSignsError=”More than one @ symbol is not allowed.”/>

 <mx:HBox width=”100%” height=”100%” horizontalAlign=”center” verticalAlign=”middle” paddingBottom=”10″ paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ cornerRadius=”5″>

   <mx:VBox id=”mainVBox”  width=”300″ height=”180″ verticalGap=”10″ horizontalAlign=”center” verticalAlign=”middle” backgroundColor=”#8000ff” borderColor=”#ff0000″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off” cornerRadius=”5″ borderStyle=”solid”>
    <mx:Label text=”*** Applying Flex Validation In Classic Style ***” textAlign=”center” fontThickness=”6″ fontWeight=”bold” color=”#ff0000″/>         
          <mx:Form width=”100%” height=”100%” cornerRadius=”5″ defaultButton=”{submitBtn}”>
 
         <mx:HBox width=”100%” height=”5%” horizontalGap=”0″ horizontalAlign=”Center”>
          <mx:Text text=”Fields marked with (“/>
          <mx:Text text=”*” color=”red”/>
          <mx:Text text=”) are compulsory.”/>
         </mx:HBox>
      
           <mx:FormItem label=”Name:”>
              <mx:HBox width=”100%” horizontalAlign=”center” verticalAlign=”middle” horizontalGap=”1″>
              <mx:TextInput id=”nameTxtInput” restrict=”a-zA-Z” borderStyle=”solid” cornerRadius=”7″/>
                 <mx:Label text=”*” color=”red”/>
                 </mx:HBox>
         </mx:FormItem>
        
        <mx:FormItem label=”Birth Date:”>
            <mx:HBox width=”100%” horizontalAlign=”center” verticalAlign=”middle” horizontalGap=”1″>
                  <mx:DateField id=”birthDateField” yearNavigationEnabled=”true”/>
                   <mx:Label text=”*” color=”red”/>
                </mx:HBox>
           </mx:FormItem>
        
         <mx:FormItem label=”Email Id:”>
       <mx:HBox width=”100%” verticalAlign=”middle” horizontalGap=”1″>
        <mx:TextInput id=”emailTxtInput” restrict=”a-z0-9.@_” borderStyle=”solid” cornerRadius=”7″/>
          <mx:Label text=”*” color=”red”/>
        </mx:HBox>
        </mx:FormItem>
        
       <mx:HBox id=”buttonHBox” width=”100%”  height=”5%” horizontalAlign=”center” verticalAlign=”middle”>
                   <mx:Button id=”submitBtn” label=”Submit” buttonMode=”true” useHandCursor=”true”  click=”funValidateForm(event)”/> 
             </mx:HBox>
           
      </mx:Form>
   
         </mx:VBox>   
 
 </mx:HBox>            
 
</mx:Application>

Enjoy Flexing…………………..

Shardul Singh Bartwal 

Advertisements

2 Responses to “Using Inbuilt Validators Of Flex in Classic Style”

  1. krunal said

    Hi,

    This is nice one.

    But how can we change that red border color with its message box color?

    Thanks

    • shardulbartwal said

      Hi,
      Pls use the errorColor property of that particular control.Like If you want to change the red border color for the email textinput box then write errorColor=”0xFFFFFF” for TextInput with id=”emailTxtInput”.

      Instead of white(0xFFFFFF) you can put the color of your message box.

      Hope this will help you.

      Thnx………
      Shardul

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: