Customizing a Flex TextInput control’s error color at Flex Examples

Sep

Customizing a Flex TextInput control’s error color

By Peter deHaan

Categories: TextInput Tags: errorColor, errorString, TextInput.

The following example shows how you can customize a Flex TextInput control’s error color and error string using the errorColor style and errorString property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/01/customizing-a-flex-textinput-controls-error-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="errorColor:" />
        <mx:ColorPicker id="colorPicker" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="text:" required="true">
            <mx:TextInput id="textInput"
                    errorColor="{colorPicker.selectedColor}"
                    errorString="Custom error color" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

6 Responses to “Customizing a Flex TextInput control's error color”

Feed for this Entry View blog reactions

1 Anonymous May 21st, 2008 at 3:20 pm

How do I change the background color around the custom color error message?

2 peterd May 21st, 2008 at 5:52 pm

Anonymous (if that is you real name),

What if you try setting the .errorTip style, like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        .errorTip {
            borderColor: haloOrange;
            color: black;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontWeight: normal;
        }

        TextInput {
            errorColor: haloOrange;
        }
    </mx:Style>

    <mx:TextInput id="textInput"
            errorString="Hey, you missed a spot!" />

</mx:Application>

Peter

3 jaume Aug 15th, 2008 at 2:23 am

Hi, i was looking for this trick for a long time. I had trobule because this style is not on the standard list. Thanks for posting Peter!!

By the way, this site is the best for learning those flex tricks that you’re allways wondering about how are done jeje.

Thanks!
4 Yon Sep 26th, 2008 at 5:10 pm
And how would you change dynamically the errorTip color?

I want to set warnings and errors.
Warnings being yellow & errors red.

Ive been trying to set
```
errorTip {
    borderColor: haloOrange;
}
```
5 Yon Sep 26th, 2008 at 5:15 pm
Hi, i was wondering, how would you change dynamically the errorTip color?

I want to set warnings and errors.
Warnings being yellow & errors red.

Ive been trying to set
```
errorTip {
    borderColor: #FF0000;
}
```
and then programatically change it to say
```
warnTip {
    borderColor #FFCC00;
}
```
But i dont know what to set it to.
I was changing the whole TextInput style, so it would also change the errorColor respectively, and that works fine.

Yet i dont know how to change the errorTip, since i dont know to what element to apply the .styleName to

and applying it to the input as
```
setStyle("errorTip.borderColor", "#FFCC00")
```
or
```
setStyle("errorTip", "#FFCC00")
```
dont seem to work either.

Any clues?

6 peterd Sep 26th, 2008 at 5:25 pm

Yon,

Something like this?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.data;
                var cssObj:CSSStyleDeclaration;
                cssObj = StyleManager.getStyleDeclaration(".errorTip");
                cssObj.setStyle("borderColor", value);
                textInput.setStyle("errorColor", value);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red"    data="red" />
        <mx:Object label="Orange" data="haloOrange" />
        <mx:Object label="Yellow" data="yellow" />
        <mx:Object label="Green"  data="haloGreen" />
        <mx:Object label="Blue"   data="haloBlue" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="color:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        prompt="Please select a color:"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput"
            errorString="Oh Noes, an errata!" />

</mx:Application>