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.

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

11 thoughts on “Customizing a Flex TextInput control’s error color

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

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

  3. 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;
    }
    
  4. 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?

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

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

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

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

    1. @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

Comments are closed.