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



How do I change the background color around the custom color error message?
Anonymous (if that is you real name),
What if you try setting the
.errorTipstyle, 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
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!
And how would you change dynamically the
errorTipcolor?I want to set warnings and errors.
Warnings being yellow & errors red.
Ive been trying to set
errorTip { borderColor: haloOrange; }Hi, i was wondering, how would you change dynamically the
errorTipcolor?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
errorColorrespectively, and that works fine.Yet i dont know how to change the
errorTip, since i dont know to what element to apply the.styleNametoand applying it to the input as
setStyle("errorTip.borderColor", "#FFCC00")or
setStyle("errorTip", "#FFCC00")dont seem to work either.
Any clues?
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>Peter