Changing the default color on flex validation errors

Question

The examples I've seen seem to show how to change the color that shows when the user actually hovers over the textinput field.

However when the validation fails, a generic textInput border qill have a red line over it. My CSS file uses a border skin for the textInput, so I can't see this line.

I was hoping there was a way to highlight the text box when it failed validation, or re-enable the red line feature. I don't want to get rid of my CSS cos it'll totally blow my color-scheme, but any tweak allowing the error line to show would be much appreciated.

This is the CSS:

TextInput, TextArea
{
    border-skin: Embed(source='/../assets/images/input_bg.png', scaleGridLeft=8, scaleGridRight=20, scaleGridTop=8,scaleGridBottom=9);
    padding-top:2;
    padding-left:2;
    font-size:11;
}

Answer 1

anything that extends UIComponent (both TextInput and TextArea do) has a style called errorColor. It defaults to red. You can change this to whatever you want.

Additionally, if you've got an image that you are using as a border, you should probably remove the pixels from the middle so that it is an actual border instead of an overlay.

Answer 2

The only way I've managed to find, is that Validator will change the component's borderColor style. I don't think it can be achieved using an image- you'll have to embed the image in a basic GraphicRectangularBorder subclass or similar. You can then add this to your skin class:

override public function styleChanged(styleProp:String):void
{
    super.styleChanged(styleProp);

    if (styleProp == "borderColor")
    {
        if (getStyle("borderColor") == getStyle("errorColor"))
        {
            // show error outline
        }
        else
        {
            // hide error outline
        }
    }
}