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);
}

4 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
Thiago Says:
May 27th, 2009 at 10:06 pm

Oppps:

this is necessary:

import mx.validators.Validator;
Marc de Kwant Says:
January 30th, 2010 at 6:59 pm

Even better, with larger forms and a mix of required and non-required fields, is to enable the button when all required fields are entered insteadof when the fields are valid.
Alot of people tend to check which fields are validation enabled with a push on the submit button.