This is probably very easy... but how can I cancel validation triggered by
Validators.validateAll(validatorsListArray) by pressing a Button?

I change between 2 states and some TextInputs are kept. I don't want them to
have the red border etc that comes with validation failure.

Thank you!

When you want to remove the red box, set the errorString of the control to "".

John: Way cool! I needed this info, thanks!
Only issue I had was that it also prevents the tooltip from showing with the
error message, but I use an Alert box to get that info to the user anyway.

Francisco:
While incorporating this new-found gem into an existing app, I went ahead and
pulled out code to give you an example of how to run validators, set props,
display helpful error messages, etc. Knowledge I could have used when I started
using validators for Forms. I hope it is useful.

Link to application (with source view):
http://www.anaheimwib.com/_comps/validation/
(Link will be active for a few days only)



<?xml version="1.0" encoding="utf-8"?>
<!--Example to demonstrate data validation-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
initialize="initializeFormHandler(event)"
viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
import mx.controls.Alert;
import mx.validators.Validator;

private var allValidationsPassed:Boolean;//Used to determine
whether validations passed.
private var _formValidators:Array;//Used to validate all required
fields.

private function initializeFormHandler(event:Event):void {
//Called from app's initialize event.
//Creates an array with all the Form's data validators,
//allowing the runLoginFormValidators() procedure to run them
//all at once when required, such as clicking the 'Login' button.
_formValidators = [userNameValidator,passwordValidator];//Names of
the actual data validators.
}
private function runLoginFormValidators(event:Event=null):Boolean {
//Runs the name/password validators and displays helpful error
message, if neccessary.
var results:Array = Validator.validateAll(_formValidators);
//If the results array is empty then all data fields passed
validation.
//If not, at least one validator didn't pass. Display error message
for user.
var pluralVal:String;//var to make error message grammatically
correct.
if (results.length >1) {
pluralVal = 's are ';
}else{
pluralVal = ' is ';
}
if (results.length >0) {
//Assemble the error message:
var message:String = "The following field" + pluralVal +
"incorrect:\n";
//Loop thru the results, get id of
//the source for the incorrect validator.
for(var i:uint = 0; i <results.length; i++) {
message += results[i].target.source.parent.label + "-\n" +
results[i].message + "\n\n";
}
message += "\nPlease verify your entries and try again.";
Alert.show(message,"We're sorry... ",Alert.OK);
allValidationsPassed=false;
}else{
allValidationsPassed=true;
}
return allValidationsPassed;
}
private function validHandler(event:ValidationResultEvent):void{
//On validation success, sets the default gray border color.
event.currentTarget.source.setStyle("borderColor", 0xb7babc);
}
private function invalidHandler(event:ValidationResultEvent):void{
//On validation error, sets Green border color.
//event.currentTarget.source.errorString = event.message;
event.currentTarget.source.setStyle("borderColor", 0x00ff00);
}
private function resetForm(event:MouseEvent):void{
//Resets the form to its defaults.
//Remove the 'error' border color.
userName.errorString='';//Also prevents "tooltip" error msg
from displaying on Mouse Over.
password.errorString='';//Also prevents "tooltip" error msg
from displaying on Mouse Over.
//Clear the textInput.
userName.text='';
password.text='';
//Resets the border color to the default gray.
userName.setStyle("borderColor",0xb7babc);
password.setStyle("borderColor",0xb7babc);
}
private function loginProcedure(event:MouseEvent):void{
//First, validate all data:
if (runLoginFormValidators()){//Returns T/F.
//Validations passed; do login routines here:
Alert.show("Login was successful","Welcome!");
}else{
//Validations failed. Do not log the user in.
//Take any other actions here...
}
return;
}
]]>
</mx:Script>

<!--UI Components-->
<mx:Panel id="panelLogin" title="Login to web site" x="10" y="10">
<mx:Form x="52.75" y="31" width="278" height="100">
<mx:FormItem label="User Name" required="true">
<mx:TextInput id="userName"/>
</mx:FormItem>
<mx:FormItem label="Password" required="true">
<mx:TextInput id="password"/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar horizontalAlign="center">
<mx:HBox x="10" y="345">
<mx:Button label="Login" click="loginProcedure(event)"/>
<mx:Button label="Reset Form" click="resetForm(event)"/>
</mx:HBox>
</mx:ControlBar>
</mx:Panel>

<!--Data Validators for REQUIRED FIELDS-->
<mx:StringValidator id="userNameValidator"
source="{userName}"
maxLength="1"
property="text"
invalid="invalidHandler(event)"
valid="validHandler(event)"
listener="null"/> <!-- prevents the default handler from running-->
<mx:StringValidator id="passwordValidator"
source="{password}"
maxLength="1"
property="text"
invalid="invalidHandler(event)"
valid="validHandler(event)"
listener="null"/> <!-- prevents the default handler from running-->

<mx:TextArea x="10" y="197" width="298" height="201">
<mx:text><![CDATA[For testing the validators, both fields are set to
only accept a single character or else validation will fail.
The Login button causes all validators to run.
A green border is drawn when validation fails.
A message is displayed detailing the reason for any field validation failure.

Resetting the form clears the text input fields and draws the default gray
border.
Since default validator behavior is being overridden, user will NOT get a
message tool tip when hovering the mouse over the text input control.
]]></mx:text>
</mx:TextArea>

</mx:Application>

I've downloaded the ZIP and will be importing it into Flex to have a detailed look!

Thank you!

Great example, rtalton!
Your comments made it easy reading. And I learned how to put that damn required star (*) when a field is required! ) I always wondered how that's done!

Thank you!

Glad it was helpful. I just wish setting errorstring='"" didn't prevent the
default tooltip from appearing. And, also on my wish list, a way to put the red
asterisk on a required field's label to the left of the label's text, instead
of it being forced to the right of the text. Guess I'm being too picky now.
I'm gonna have to get into extending components and overriding props, maybe.
>shudder<

I made some changes to make this work better.
http://www.anaheimwib.com/_comps/newvalidation/

I used both the validator's triggerEvent property and the textInput's
errorColor property to get the results I wanted. It works well. I change the
triggerEvent just before clearing the textInput fields, then change the
triggerEvent back. This keeps the validation from being called again while
resetting the form.

Instead of setting the border color, I found the errorColor property, which is
more to the point. Now I really don't need the "validHandler" to change the
border color; it's done automatically.



<?xml version="1.0" encoding="utf-8"?>
<!--Example to demonstrate data validation-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
initialize="initializeFormHandler(event)"
viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
import mx.controls.Alert;
import mx.validators.Validator;

private var allValidationsPassed:Boolean;//Used to determine
whether validations passed.
private var _formValidators:Array;//Used to validate all required
fields.

private function initializeFormHandler(event:Event):void {
//Called from app's initialize event.
//Creates an array with all the Form's data validators,
//allowing the runLoginFormValidators() procedure to run them
//all at once when required, such as clicking the 'Login' button.
_formValidators = [userNameValidator,passwordValidator];//Names of
the actual data validators.
}
private function runLoginFormValidators(event:Event=null):Boolean {
//Runs the name/password validators and displays helpful error
message, if neccessary.
var results:Array = Validator.validateAll(_formValidators);
//If the results array is empty then all data fields passed
validation.
//If not, at least one validator didn't pass. Display error message
for user.
var pluralVal:String;//var to make error message grammatically
correct.
if (results.length >1) {
pluralVal = 's are ';
}else{
pluralVal = ' is ';
}
if (results.length >0) {
//Assemble the error message:
var message:String = "The following field" + pluralVal +
"incorrect:\n";
//Loop thru the results, get id of
//the source for the incorrect validator.
for(var i:uint = 0; i <results.length; i++) {
message += results[i].target.source.parent.label + "-\n" +
results[i].message + "\n\n";
}
message += "\nPlease verify your entries and try again.";
Alert.show(message,"We're sorry... ",Alert.OK);
allValidationsPassed=false;
}else{
allValidationsPassed=true;
}
return allValidationsPassed;
}
private function validHandler(event:ValidationResultEvent):void{
//On validation success, sets the default gray border color.
//event.currentTarget.source.setStyle("borderColor ",0xb7babc);
}
private function invalidHandler(event:ValidationResultEvent):void{
//On validation error, sets Green errorColor.
event.currentTarget.source.setStyle("errorColor",0 x00ff00);
//On validation error, sets Green border color.
//event.currentTarget.source.errorString = event.message;
//event.currentTarget.source.setStyle("borderColor ",0x00ff00);
}
private function resetForm(event:MouseEvent):void{
//Resets the form to its defaults.
//Remove the 'error' border color.
userName.errorString='';//Also prevents "tooltip" error msg
from displaying on Mouse Over.
password.errorString='';//Also prevents "tooltip" error msg
from displaying on Mouse Over.
//To prevent clearing of textInput fields triggering a
validation event,
//temporarily change the triggerEvent to an event
//which currently isn't being used:
userNameValidator.triggerEvent=
mx.events.FlexEvent.HIDE;//Default is valueCommit;
passwordValidator.triggerEvent=
mx.events.FlexEvent.HIDE;//Default is valueCommit;
//Clear the textInput.
userName.text='';
password.text='';
//Set the validation triggers back to the default Event:
userNameValidator.triggerEvent=
mx.events.FlexEvent.VALUE_COMMIT;
passwordValidator.triggerEvent=
mx.events.FlexEvent.VALUE_COMMIT;
//Resets the border color to the default gray.
//userName.setStyle("borderColor",0xb7babc);
//password.setStyle("borderColor",0xb7babc);
}
private function loginProcedure(event:MouseEvent):void{
//First, validate all data:
if (runLoginFormValidators()){//Returns T/F.
//Validations passed; do login routines here:
Alert.show("Login was successful","Welcome!");
}else{
//Validations failed. Do not log the user in.
//Take any other actions here...
}
return;
}
]]>
</mx:Script>

<!--UI Components-->
<mx:Panel id="panelLogin" title="Login to web site" x="10" y="10">
<mx:Form x="52.75" y="31" width="278" height="100">
<mx:FormItem label="User Name" required="true">
<mx:TextInput id="userName"/>
</mx:FormItem>
<mx:FormItem label="Password" required="true">
<mx:TextInput id="password"/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar horizontalAlign="center">
<mx:HBox x="10" y="345">
<mx:Button label="Login" click="loginProcedure(event)"/>
<mx:Button label="Reset Form" click="resetForm(event)"/>
</mx:HBox>
</mx:ControlBar>
</mx:Panel>

<!--Data Validators for REQUIRED FIELDS-->
<mx:StringValidator id="userNameValidator"
source="{userName}"
maxLength="1"
property="text"
invalid="invalidHandler(event)"/> <!-- prevents the default handler
from running-->
<mx:StringValidator id="passwordValidator"
source="{password}"
maxLength="1"
property="text"
invalid="invalidHandler(event)"/> <!-- prevents the default handler
from running-->

<mx:TextArea x="10" y="197" width="298" height="201">
<mx:text><![CDATA[For testing the validators, both fields are set to
only accept a single character or else validation will fail.
The Login button causes all validators to run.
The textInput's errorColor property is changed to green when validation fails.
A message is displayed detailing the reason for any field validation failure.
Resetting the form clears the text input fields and draws the default gray
border.
]]></mx:text>
</mx:TextArea>

</mx:Application>

Yup, it better optimized!

Only one thing now: if you Reset the form then select a text field, then
select the other text field (selection means click in the field), the first one
will retain its green border. Minor setback...

To add to what you were saying, I was searching for a way to move the red * to
the right of the input field to be like this:

Name: [text input] *

Clicking in a text field, then clicking away from it causes the validator to
run (the valueCommit event runs). This is normal behavior. Since the field has
required=true, the validation does not pass (no text was input), and the
textInput is then highlighted with the error color. So you'd have to allow an
empty field to validate to avoid the error color being shown, and this is
probably not what you want.

One way to prevent this is to NOT validate the fields until you are ready to
submit the entire Form's contents. But I prefer giving feedback as they move
from field to field, instead of waiting until they submit all of the data by
clicking the button.