How to attach an error to a FormItem (not errorString) - 【StackMirror】|actionscript-3|flex

I would like to attach an error to a formItem. In spark, it appears that the standard way it is rendering on error on validation of a textInput, is bordering the textInput with red, placing a yellow alert icon next to the textInput and placing the error message in the formItem aligned to the right.

How does one do this manually for a custom formItem invalidation so that I can conform to error display?

2012-04-05 16:24
by MetaChrome

I don't understand what you're trying to achieve - RIAstar 2012-04-05 16:29

Lets say you have set of custom components in a formItem. The set of custom components is invalid. How does one attach an error to the formItem that conforms to the spark way of displaying errors as described above? I have a group of radioButtons that I want to make required or for example a group of checkboxes that I want to make required. Setting errorString doesn't do anything - MetaChrome 2012-04-05 16:46

Is there anything stopping you from setting errorString on each of the checkboxes or radioButtons - Wesley Petrowski 2012-04-05 16:55

Setting errorString on a RadioButton doesn't do anything. And it is incorrect and ugly to set an error on every radioButton or component of an invalid group. Either way, I would expect this to a very known piece of as it is required for writing any custom form components or validators - MetaChrome 2012-04-05 17:00

Setting errorString on a RadioButton works for me - it changes the borderColor and an error message appears on hover. I'm just trying to understand what it is you want to have happen. Do you want a red border to appear around the entire FormItem? And the error message to appear... where? Any time you hover over the FormItem - Wesley Petrowski 2012-04-05 17:05

It seems to me you might be approaching this the wrong way. I think you should write a custom Validator instead of a custom FormItem - RIAstar 2012-04-05 17:09

You're right it does. The errorString was not being set. That said, the problem is my error messages are being displayed not on hover but aligned to the right in the formItem. In particular I would not style it to have a border around the formItem rather a message aligned to the right in the formItem or however other way to conform to the error message displays of the theme. It would actually look perfectly fine if my error message were displayed on hover instead of having 10 of the same error message displayed in the form item for 10 radioButtons or checkBoxes - MetaChrome 2012-04-05 17:10

@RIAStar I'm actually writing a Validator but once again the validator would have to be for the group and would in the case of the spark theme have to interact with the owner formItem to display the message aligned-right inside of it and the alert icon to conform with the theme. As explained above, setting errorString on the formItem does not accomplish this, so I am inquiring what does. See: errorIndicatorSource="assets/ErrorIndicator.png" requiredIndicatorSource="assets/RequiredIndicator.png - MetaChrome 2012-04-05 17:13

Setting errorString on a FormItem will cause the error tooltip to appear when you hover over the FormItem.

<mx:FormItem label="Pick some numbers!" x="10" y="10" errorString="Error!">
  <mx:CheckBox label="One"/>
  <mx:CheckBox label="Two"/>
  <mx:CheckBox label="Three"/>
</mx:FormItem>

No hover:

enter image description here

Hover:

enter image description here

2012-04-05 17:14
by Wesley Petrowski

How peculiar, I will post my screenshot momentarily. Thanks so much for your help - MetaChrome 2012-04-05 17:15

@dlots Of course, I'm using mx components. Just noticed you were using spark, so it might be different - Wesley Petrowski 2012-04-05 17:16

I think there is an error with my theme compilation. How are you specifying the theme? Setting it in mxml did not do anything. Ahhh, that's probably it. If that is the case looks like I'm going to switch to mx - MetaChrome 2012-04-05 17:17

@dlots I didn't change anything regarding themes - just created a new empty project and used whatever the default was. The theme is set to "Spark" under "Flex Theme" in the project properties - Wesley Petrowski 2012-04-05 17:20

That was in reply to the assumption that that was rendered with spark components. I think this is an issue with the spark components and can only be resolved by modifying FormItemSkin - MetaChrome 2012-04-05 17:23