Levels of Experience

Beginner

Intermediate

Advanced

---

Related Examples

Simple Click Event - Beginner

This is a simple click event that shows how to add an event listener and how to pass in the button o...
Click for more

Accordian with Change Event - Intermediate

MXML Accordian component

Form Validation Example

This is a form validation example that checks for text validation. If there is an error, it changes the color scheme, adds a error string. The code checks each input field for errors.

Simple form with ids on all the input fields

<mx:Form color="0xffffff">
		<mx:FormItem label="First Name:">
						<mx:TextInput width="230" themeColor="0x9e3434" id="txtFirst" />
					</mx:FormItem>
					<mx:FormItem label="Last Name:">
							<mx:TextInput width="230" themeColor="0x9e3434" id="txtLast" />
					</mx:FormItem>
					<mx:FormItem label="Password:">
						<mx:TextInput displayAsPassword="true" width="230"  themeColor="0x9e3434" textAlign="left" id="txtPass1" />
					</mx:FormItem>
					<mx:FormItem label="Re-Type Password:">
						<mx:TextInput width="230" displayAsPassword="true" themeColor="0x9e3434" textAlign="left" id="txtPass2" />
					</mx:FormItem>
					<mx:FormItem label="E-Mail:">
						<mx:TextInput width="230" themeColor="0x9e3434" textAlign="left" id="txtEmail" />
					</mx:FormItem>
					
						<mx:FormItem>
							<mx:Button label="Create Account" id="createBtn" styleName="signInBtn" width="130"/>
						</mx:FormItem>	
										
					<mx:Text text="" color="0x9e3434" id="errorText" />	
		
	</mx:Form>

There are 2 functions at work here. The init function which is called from the creationComplete event, and the validation function. The validation function goes through each input field, checks it, and gives it either an error color, or removes the error color.

private function init():void{
    			createBtn.addEventListener(MouseEvent.CLICK,validateForm);
    		}
    		private function validateForm(evt:MouseEvent):void{
				if(txtFirst.text==""){
					txtFirst.setStyle("themeColor","#9e3434");
					txtFirst.setStyle("backgroundColor","#ffb8b8");
					txtFirst.setFocus();
					txtFirst.errorString="Please type your First Name";
					errorText.text="Please fill out the required fields";
				}else{
					txtFirst.errorString="";
					txtFirst.setStyle("backgroundColor","#ffffff");
				}
				if(txtLast.text==""){
					txtLast.setStyle("themeColor","#9e3434");
					txtLast.setStyle("backgroundColor","#ffb8b8");
					txtLast.setFocus();	
					txtLast.errorString="Please type your Last Name";
					errorText.text="Please fill out the required fields";	
				}else{
					txtLast.errorString="";
					txtLast.setStyle("backgroundColor","#ffffff");
				}
				if(txtPass1.text==""){
					txtPass1.setStyle("themeColor","#9e3434");
					txtPass1.setStyle("backgroundColor","#ffb8b8");
					txtPass1.setFocus();
					txtPass1.errorString="Please type your Password";
					errorText.text="Please fill out the required fields";	
				}
				if(txtPass2.text==""){
					txtPass2.setStyle("themeColor","#9e3434");
					txtPass2.setStyle("backgroundColor","#ffb8b8");
					txtPass2.setFocus();
					txtPass2.errorString="Please Re-Type your Password";
					errorText.text="Please fill out the required fields";	
				}
				if(txtPass1.text!="" && txtPass2.text!=""){
					if(txtPass1.text!=txtPass2.text){
						txtPass1.setStyle("themeColor","#9e3434");
					txtPass1.setStyle("backgroundColor","#ffb8b8");
					txtPass1.setFocus();	
					txtPass2.setStyle("themeColor","#9e3434");
					txtPass2.setStyle("backgroundColor","#ffb8b8");
					errorText.text="Please fill out the required fields";
					txtPass2.setFocus();
					
					}
				}
				if(txtEmail.text==""){
					txtEmail.setStyle("themeColor","#9e3434");
					txtEmail.setStyle("backgroundColor","#ffb8b8");
					txtEmail.setFocus();
					txtEmail.errorString="Please input a valid Email";	
					errorText.text="Please fill out the required fields";	
				}else{
					txtEmail.errorString="";
					txtEmail.setStyle("backgroundColor","#ffffff");
				}
				
				
					if(txtFirst.text!="" && txtLast.text!="" && txtPass1.text==txtPass2.text 
					&& txtPass1.text!="" 
					&& txtEmail.text !="")
					 {
				 	mx.controls.Alert.show('Accepted');
				 	}
				
			}