Customizing a Flex TextInput control’s error color

11 Responses to Customizing a Flex TextInput control’s error color

1. Anonymous says:

   May 21, 2008 at 3:20 pm

   How do I change the background color around the custom color error message?
2. peterd says:

   May 21, 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 says:

   August 15, 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 says:

   September 26, 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 says:

   September 26, 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 says:

   September 26, 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>
   

   Peter
7. Tim Wilson says:

   October 3, 2009 at 11:41 pm

   How would I go about forcing an error message to appear programmically?
8. Sameera Sandaruwan says:

   February 5, 2010 at 2:50 am

   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
9. Munib says:

   March 8, 2010 at 3:02 am

   Hi Peter,

   Is there any way to change background color of errorMessage and border color? I want background color and border color of ErrorTip look different.

   -Munib
10. Yoosaf says:

    June 25, 2010 at 2:13 am

    Hi,

    I want to change the thickness of the red focus rectangle that comes when a textinput is invalid. In short I want the invalid text boxes to look more prominant to user.
    • Peter deHaan says:

      June 25, 2010 at 7:50 am

      @Yoosaf,

      You can try setting the borderStyle style to “solid” and then setting the borderThickness style. Or you could try setting the focusThickness style, which changes the weight of the focus “glow”.

       
      <?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[
                  protected function ch_changeHandler(event:Event):void {
                      if (ch.selected) {
                          ti.errorString = "Errata";
                          ti.setStyle("borderThickness", 6);
                          // ti.setStyle("focusThickness", 10);
                      } else {
                          ti.errorString = "";
                          ti.setStyle("borderThickness", 1);
                          // ti.setStyle("focusThickness", 2);
                      }
                  }
              ]]>
          </mx:Script>
       
          <mx:ApplicationControlBar dock="true">
              <mx:Form styleName="plain">
                  <mx:FormItem label="errorString:">
                      <mx:CheckBox id="ch" change="ch_changeHandler(event);" />
                  </mx:FormItem>
              </mx:Form>
          </mx:ApplicationControlBar>
       
          <mx:TextInput id="ti" errorColor="red" borderStyle="solid" />
       
      </mx:Application>

      Peter