01
Sep
07

Customizing a Flex TextInput control’s error color

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”


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

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

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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".