Mobile Flex 4.5 FormItem errorTip not showing - forms

Question

I'm currently trying to use the numbervalidator to validate that a couple of my fields that are using decimal values. I'd like it appear how the mx examples show e.g. http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/validators/NumberValidator.html#includeExamplesSummary
Even though I've enabled it (read below), the errorTip is not appearing. And the error message it does show is placed at the top of the screen rather than within the formitem.
<s:NumberValidator id="nv1" allowNegative="false" source="{field1}" property="text" fractionalDigits="3" />
<s:NumberValidator id="nv2" allowNegative="false" source="{field2}" property="text" fractionalDigits="3" />
I read a suggestion to override the formitem skin and set showErrorTip to true (on the contentGroup) but that had no impact. I also removed errorTextDisplay to try and stop the other error message appearing however that also had no impact.
I'd be happy enough if I could get the existing error messages to appear within the formItem (underneath). I've included the basic structure of my view below:
<s:Scroller width="100%" height="100%">
<s:Group>
<s:Form id="myForm" width="100%">
<s:layout>
<s:FormLayout gap="0"/>
</s:layout>
<s:HGroup width="100%">
<s:FormItem label="Field1" width="50%">
<s:TextInput id="field1" width="100%" text="{data.field1}" restrict="0-9." />
</s:FormItem>
<s:FormItem label="Field2" width="50%">
<s:TextInput id="field2" width="100%" text="{data.field2}" restrict="0-9." />
</s:FormItem>
</s:HGroup>
</s:Form>
</s:Group>
</s:Scroller>
It's a very long form (I've left out the other fields) which is why I've used a scroller and I'm showing the inputs in a two column layout.

Answer 1

Try this out, This should do the trick of showing the error message, U need to add a trigger to the validator and mention what event it has to trigger upon.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:NumberValidator id="nv1" allowNegative="false" source="{field1}" property="text" fractionalDigits="3"
trigger="{validate}" triggerEvent="click" requiredFieldError="No use"/>
<s:NumberValidator id="nv2" allowNegative="false" source="{field2}" property="text" fractionalDigits="3"
trigger="{validate}" triggerEvent="click" requiredFieldError="No use"/>
</fx:Declarations>
<s:Scroller width="100%" height="100%">
<s:Group>
<s:Form id="myForm" width="100%">
<s:layout>
<s:FormLayout gap="0"/>
</s:layout>
<s:VGroup width="100%">
<s:FormItem label="Field1" width="50%">
<s:TextInput id="field1" width="100%" text="11" restrict="0-9." />
</s:FormItem>
<s:FormItem label="Field2" width="50%">
<s:TextInput id="field2" width="100%" text="22" restrict="0-9." />
</s:FormItem>
</s:VGroup>
<s:Button id="validate" label="Validate"/>
</s:Form>
</s:Group>
</s:Scroller>
</s:Application>

Answer 2

The reason why you were getting differnent type of error with an icon is because you have used <s:Form> and <s:FormItem>, While changing it to <mx:Form> and <mx:FormItem> you will get the old kind of error with the highlighted box and error on tool tip. Try the below sample.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:NumberValidator id="nv1" allowNegative="false" source="{field1}" property="text" fractionalDigits="3" />
<s:NumberValidator id="nv2" allowNegative="false" source="{field2}" property="text" fractionalDigits="3" />
</fx:Declarations>
<s:Scroller width="100%" height="100%">
<s:Group>
<mx:Form id="myForm" width="100%">
<s:HGroup width="100%">
<mx:FormItem label="Field1" width="50%">
<s:TextInput id="field1" width="100%" text="1" restrict="0-9." />
</mx:FormItem>
<mx:FormItem label="Field2" width="50%">
<s:TextInput id="field2" width="100%" text="2" restrict="0-9." />
</mx:FormItem>
</s:HGroup>
</mx:Form>
</s:Group>
</s:Scroller>
</s:Application>

Answer 3

I've managed to find the solution to my own question, partially because I neglected to mention what turned out to be an important part of the problem. The default layout of the form skins were pretty terrible so I had switched to the StackedFormSkin and StackedFormItemSkin respectively.
However the Stacked skins move the errorTextDisplay from the formitem to the form skin. What I ended up needing to do was create my own skins (c+p'd from the respective stacked skins).
In my form skins I simply removed the errorTextDisplay element from the FormSkin and copied errorTextDisplay from the original FormItemSkin, made a few alterations (as below) to make it appear underneath the text input.
<s:RichText id="errorTextDisplay" includeIn="errorStates"
fontStyle="italic" fontWeight="normal" color="0xFE0000"
left="contentCol:0" right="helpCol:10"
bottom="row3:10" baseline="row3:0"
maxDisplayedLines="-1"/>
You'll need to add row3 as an extra ConstraintRow.
Basically the change above will get the advantages of the StackedForm skins but means that you're error messages will still appear alongside the input which caused the error.