Using Inbuilt Validators Of Flex in Classic Style
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
