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

Sep

Customizing a Flex TextInput control’s error color

By peterd

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.

2 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>