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.
{ 8 comments… read them below or add one }
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
How would I go about forcing an error message to appear programmically?
Step 1. On focusIn, left side of flex textinput control become light blue,
Step 2. At the validation, entire control border become red and left side of the control become,
thick red vertical line,
Step 3. Now when I gradually delete additional letters from the textinput control, entire red
outline border automatically removed, but I can see red think line of the left side of the textinput
control is still there,
My requirements are,
1. Validation colors need to change.
2. After validation, remain left red think vertical line need to change to normal focusIn
color(light blue)
Can anyone help me to achieve this, is that event fire, CSS changes, function overwrite.
Thanks in advanced.
Image view 1
Image view 2
Image view 3