Flex Examples » Validator http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Displaying the error indicator on a Spark FormItem container in Flex Hero http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/ http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/#comments Tue, 31 Aug 2010 06:42:54 +0000 Peter deHaan http://blog.flexexamples.com/?p=3323 The following example shows how you can display the error indicator on a Spark FormItem container in Flex Hero by setting the errorString property or using the Flex validators.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/ --> <s:Application name="Spark_Form_Validator_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" /> </s:layout>   <fx:Script> <![CDATA[ import mx.validators.Validator;   protected function [...]]]> The following example shows how you can display the error indicator on a Spark FormItem container in Flex Hero by setting the errorString property or using the Flex validators.

The following example(s) require Flash Player 10 and the beta Adobe Flex Hero SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex Hero SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/ -->
<s:Application name="Spark_Form_Validator_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.validators.Validator;
 
            protected function resetBtn_clickHandler(evt:MouseEvent):void {
                username.text = "";
                password1.text = "";
                password2.text = "";
                username.errorString = "";
                password1.errorString = "";
            }
 
            protected function submitBtn_clickHandler(evt:MouseEvent):void {
                Validator.validateAll(valArr);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Array id="valArr">
            <mx:StringValidator source="{username}" property="text" required="true" minLength="4" />
            <mx:StringValidator source="{password1}" property="text" required="true" minLength="4" />
        </fx:Array>
    </fx:Declarations>
 
    <s:Form id="frm" defaultButton="{submitBtn}" backgroundColor="#EEEEEE">
        <s:FormHeading label="Spark Form Heading" backgroundColor="haloSilver" />
        <s:FormItem sequenceLabel="1." label="Username:">
            <s:helpContent>
                <s:Label text="user@domain.com" />
            </s:helpContent>
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:">
            <s:helpContent>
                <s:Label text="weak" color="red" />
            </s:helpContent>
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:helpContent>
                <s:HGroup>
                    <s:Label text="One" color="red" />
                    <s:Label text="Two" color="blue" />
                </s:HGroup>
            </s:helpContent>
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" click="resetBtn_clickHandler(event);" />
            <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event);" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

This entry is based on a beta version of the Flex Hero SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Hero SDK.

 
]]> http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/feed/ 0 Using the AnimateColor effect to animate the content background color of a Spark TextInput control in Flex 4 http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/#comments Sat, 07 Mar 2009 07:42:35 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ The following example shows how you can use the AnimateColor effect to animate the background color on a Spark TextInput control in Flex 4.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ --> <s:Application name="Spark_TextInput_contentBackgroundColor_AnimateColor_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">   <fx:Script> <![CDATA[ private function textInput_focusIn(evt:FocusEvent):void { colorEffect.play([evt.currentTarget]); }   private function textInput_focusOut(evt:FocusEvent):void { colorEffect.stop(); evt.currentTarget.setStyle("contentBackgroundColor", "white"); } [...]]]> The following example shows how you can use the AnimateColor effect to animate the background color on a Spark TextInput control in Flex 4.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_contentBackgroundColor_AnimateColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
 
    <fx:Script>
        <![CDATA[
            private function textInput_focusIn(evt:FocusEvent):void {
                colorEffect.play([evt.currentTarget]);
            }
 
            private function textInput_focusOut(evt:FocusEvent):void {
                colorEffect.stop();
                evt.currentTarget.setStyle("contentBackgroundColor", "white");
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:AnimateColor id="colorEffect"
                colorPropertyName="contentBackgroundColor"
                colorFrom="0xFFFFFF"
                colorTo="0xFF0000"
                repeatBehavior="reverse"
                repeatCount="0"
                duration="500" />
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:TextInput id="textArea1"
                text="The quick brown fox jumps over the lazy dog."
                focusIn="textInput_focusIn(event);"
                focusOut="textInput_focusOut(event);" />
        <s:TextInput id="textArea2"
                text="The quick brown fox jumps over the lazy dog."
                focusIn="textInput_focusIn(event);"
                focusOut="textInput_focusOut(event);" />
        <s:TextInput id="textArea3"
                text="The quick brown fox jumps over the lazy dog."
                focusIn="textInput_focusIn(event);"
                focusOut="textInput_focusOut(event);" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.


You can also animate the content background color on a Spark TextInput control in Flex 4 by using validators, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_contentBackgroundColor_AnimateColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.validators.Validator;
            import mx.events.ValidationResultEvent;
 
            private function validateAll():void {
                colorEffect.stop();
                var results:Array = Validator.validateAll(validatorArr);
                if (results.length == 0) {
                    Alert.show("SUCCESS");
                } else {
                    var targetArr:Array = [];
                    var result:ValidationResultEvent;
                    for each (result in results) {
                        targetArr.push(result.currentTarget.source);
                    }
                    colorEffect.play(targetArr);
                }
            }
 
            private function textInput_invalid(trgt:Object):void {
                trgt.setStyle("contentBackgroundColor", "red");
            }
 
            private function textInput_valid(trgt:Object):void {
                trgt.setStyle("contentBackgroundColor", "white");
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:AnimateColor id="colorEffect"
                colorPropertyName="contentBackgroundColor"
                colorFrom="0xFFFFFF"
                colorTo="0xFF0000"
                repeatBehavior="reverse"
                repeatCount="0"
                duration="500" />
 
        <fx:Array id="validatorArr">
            <mx:StringValidator id="validator1"
                    source="{textInput1}"
                    property="text"
                    tooShortError="This string is shorter than the minimum allowed length of 4."
                    tooLongError="This string is longer than the maximum allowed length of 20."
                    minLength="4"
                    maxLength="20"
                    valid="textInput_valid(event.currentTarget.source);"
                    invalid="textInput_invalid(event.currentTarget.source);" />
            <mx:StringValidator id="validator2"
                    source="{textInput2}"
                    property="text"
                    tooShortError="This string is shorter than the minimum allowed length of 4."
                    tooLongError="This string is longer than the maximum allowed length of 20."
                    minLength="4"
                    maxLength="20"
                    valid="textInput_valid(event.currentTarget.source);"
                    invalid="textInput_invalid(event.currentTarget.source);" />
        </fx:Array>
    </fx:Declarations>
 
    <mx:Form id="frm"
             horizontalCenter="0"
             verticalCenter="0">
        <mx:FormItem label="Username:" required="true">
            <s:TextInput id="textInput1" maxChars="20" />
        </mx:FormItem>
        <mx:FormItem label="Password:" required="true">
            <s:TextInput id="textInput2" maxChars="20" />
        </mx:FormItem>
        <mx:FormItem label="Email:">
            <s:TextInput id="textInput3" maxChars="20" />
        </mx:FormItem>
        <mx:FormItem>
            <s:Button id="btn"
                    label="Validate!"
                    click="validateAll();" />
        </mx:FormItem>
    </mx:Form>
 
</s:Application>

View source is enabled in the following example.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

 
]]> http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/feed/ 2 Trimming strings using the Flex StringUtil class’s trim() method http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/ http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/#comments Fri, 07 Sep 2007 07:22:58 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/ The following example shows you how to use the StringUtil.trim() method in Flex to remove leading and trailing whitespace from form fields before validating user input. This allows you to make sure that user’s don’t try anything sneaky like enter spaces instead of characters to bypass any minimum length validation you may have in place [...]]]> The following example shows you how to use the StringUtil.trim() method in Flex to remove leading and trailing whitespace from form fields before validating user input. This allows you to make sure that user’s don’t try anything sneaky like enter spaces instead of characters to bypass any minimum length validation you may have in place when validating data.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/ -->
<mx:Application name="StringUtil_trim_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .errorTip {
            borderColor: haloBlue;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.TextInput;
            import mx.utils.StringUtil;
            import mx.validators.Validator;
 
            private function trimStr(evt:FocusEvent):void {
                var ti:TextInput = TextInput(evt.currentTarget);
                ti.text = StringUtil.trim(ti.text);
            }
 
            private function validateForm():void {
                var errors:Array = Validator.validateAll(validatorArray);
                if (errors.length) {
                    Alert.show("Form is somehow invalid.", "INVALID");
                } else {
                    Alert.show("Form is valid.", "VALID");
                }
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="validatorArray">
        <mx:StringValidator id="firstNameValidator"
                source="{firstName}"
                property="text"
                required="true" />
        <mx:StringValidator id="lastNameValidator"
                source="{lastName}"
                property="text"
                required="true" />
        <mx:EmailValidator id="emailValidator"
                source="{email}"
                property="text"
                required="true" />
    </mx:Array>
 
    <mx:Form>
        <mx:FormItem label="First name:" required="true">
            <mx:TextInput id="firstName" focusOut="trimStr(event);" />
        </mx:FormItem>
        <mx:FormItem label="Last name:" required="true">
            <mx:TextInput id="lastName" focusOut="trimStr(event);" />
        </mx:FormItem>
        <mx:FormItem label="Email:" required="true">
            <mx:TextInput id="email" focusOut="trimStr(event);" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Submit" click="validateForm();" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/feed/ 7 Using the Validators.validateAll() method to validate a form http://blog.flexexamples.com/2007/08/02/using-the-validatorsvalidateall-method-to-validate-a-form/ http://blog.flexexamples.com/2007/08/02/using-the-validatorsvalidateall-method-to-validate-a-form/#comments Thu, 02 Aug 2007 17:25:03 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/02/using-the-validatorsvalidateall-method-to-validate-a-form/ I recently saw this issue in FlexCoders and filed a bug for the poster. Well, it turns out the bug I filed was a duplicate of an existing bug, and that bug has been fixed (in Flex 3 — codename:Moxie). So, long story longer, here’s how you can use the Validator class’s validateAll() method to [...]]]> I recently saw this issue in FlexCoders and filed a bug for the poster. Well, it turns out the bug I filed was a duplicate of an existing bug, and that bug has been fixed (in Flex 3 — codename:Moxie). So, long story longer, here’s how you can use the Validator class’s validateAll() method to validate a form (which may or may not have enabled validators).

Full code (and workaround) after the jump.

This bug was reportedly fixed in build 176281, so if you have an older Flex 3 build, you may need to use the Flex 2 workaround below. Or, you could go to the nightly Flex 3 SDK builds page on the Adobe Labs site and download a build newer than 176281, which is basically anything newer than Thursday July 12, 2007.

<?xml version="1.0" encoding="utf-8"?>
<!-- FLEX 3 SOLUTION -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="initApp()">

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

            private var myValidators:Array;

            private function initApp():void {
                myValidators = [valid1, valid2];
            }

            private function clickHandler():void {
                var errors:Array = Validator.validateAll(myValidators);
                if (errors.length == 0) {
                    Alert.show("Looks valid to me.", "SUCCESS");
                }
            }
        ]]>
    </mx:Script>

    <mx:StringValidator id="valid1" source="{ti1}" property="text" minLength="4" maxLength="6" />
    <mx:StringValidator id="valid2" source="{ti2}" property="text" minLength="4" maxLength="6" enabled="false" />

    <mx:TextInput id="ti1" />
    <mx:TextInput id="ti2" />

    <mx:Button label="validate" click="clickHandler()" />

</mx:Application>

If you are using Flex 2.0.1 (Hotfix 2 or Hotfix 3), the easiest workaroud I’ve found is to just filter the array of validators that you pass to the validateAll() method so that no validators are passed if their enabled property is set to false. Thankfully this is pretty simple if you use the Array class’s filter() method, as seen below.

<?xml version="1.0" encoding="utf-8"?>
<!-- FLEX 2 SOLUTION -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="initApp()">

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

            private var myValidators:Array;

            private function initApp():void {
                myValidators = [valid1, valid2].filter(filterDisabledValidators);
            }

            private function clickHandler():void {
                var errors:Array = Validator.validateAll(myValidators);
                if (errors.length == 0) {
                    Alert.show("Looks valid to me.", "SUCCESS");
                }
            }

            private function filterDisabledValidators(element:*, index:int, arr:Array):Boolean {
                return element.enabled;
            }
        ]]>
    </mx:Script>

    <mx:StringValidator id="valid1" source="{ti1}" property="text" minLength="4" maxLength="6" />
    <mx:StringValidator id="valid2" source="{ti2}" property="text" minLength="4" maxLength="6" enabled="false" />

    <mx:TextInput id="ti1" />
    <mx:TextInput id="ti2" />

    <mx:Button label="validate" click="clickHandler()" />

</mx:Application>

For more information on the bug, and where I got the code for this post, see the bug in the public Flex bugbase at: http://bugs.adobe.com/jira/browse/SDK-9408.

Happy Flexing!

 
]]> http://blog.flexexamples.com/2007/08/02/using-the-validatorsvalidateall-method-to-validate-a-form/feed/ 4