Easy Form Validation and Submit Button enable-disable in Flex 3

by Nicolas Noben

The submit button is enabled/disabled automatically based on the form elements’ validations.

The form

<mx:Form x="0" y="90" width="100%" height="100%" id="form1" creationComplete="resetForm()">
	<mx:FormItem label="Email" width="100%">
		<mx:TextInput width="100%" id="txtEmail" change="validateUs()" />
	</mx:FormItem>
	<mx:FormItem label="Password" width="100%">
		<mx:TextInput width="100%" id="txtPassword" displayAsPassword="true" change="validateUs()"/>
	</mx:FormItem>
	<mx:FormItem width="100%">
		<mx:Button id="btnLogin" label="Login" width="85" height="25" click="loginUser()" />
	</mx:FormItem>
</mx:Form>

The validators

<mx:EmailValidator id="val1" source="{txtEmail}" property="text" required="true" />
<mx:StringValidator id="val2" source="{txtPassword}" property="text" required="true" minLength="2" />

The script

private function resetForm() :void
{
	btnLogin.enabled = false;
}
private function validateUs() :void
{
	btnLogin.enabled = (Validator.validateAll([val1,val2]).length == 0);
}

2 Responses

DavidD Says:
November 18th, 2008 at 6:10 pm

With your approach, it does mean that whenever a character is introduced in those fields, the form validates.
So on the very first character typed, you already have validation errors feedback like red borders around fields and tooltips. Users might find that a little bit quick.
Nicolas Noben Says:
November 18th, 2008 at 7:13 pm

Yeah you’re right, that sucks.

The main thing is to prevent them from hitting the Submit button without a valid form. The red border can be styled to orange