2 Replies Latest reply on Nov 5, 2011 3:17 AM by RiccardoB.

    Flex 4 spark validator message


      In Flex 4 Spark form, the validators display the error on the right inside the container (not floating) and this resize my application.


      I want to show the errors like in Flex 3 MX: on the right in a floating tooltip (so the dimensions of the container is not resized).


      Anyone has a solution?

        • 1. Re: Flex 4 spark validator message
          Jason Szeto Level 3

          The error message is displayed in the FormItem if the FormItem's skin has the errorTextDisplay skin part. To remove it, create a copy of the spark.skins.spark.FormItemSkin and remove the errorTextDisplay. To get the mx style error, set the showErrorTip and showErrorSkin styles to true on the control being validated.


          Have you checked out the Stacked form skins? These are meant to be used when space is limited.


          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"


                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">


                  <!-- Place non-visual elements (e.g., services, value objects) here -->

                  <mx:StringValidator maxLength="4" source="{ti1}" property="text"/>

                  <mx:StringValidator  maxLength="4" source="{ti3}" property="text"/>




                  @namespace s "library://ns.adobe.com/flex/spark";

                  @namespace mx "library://ns.adobe.com/flex/mx";


                  #stacked s|Form


                      skinClass : ClassReference("spark.skins.spark.StackedFormSkin");



                  #stacked s|FormItem


                      skinClass : ClassReference("spark.skins.spark.StackedFormItemSkin");



                  #noError s|TextInput


                      showErrorTip : true;

                      showErrorSkin : true;









              <s:Form id="noError">

                  <s:FormItem label="One">

                      <s:TextInput id="ti1"/>


                  <s:FormItem label="Two">

                      <s:TextInput id="ti2"/>




              <s:Form id="stacked">

                  <s:FormItem label="One">

                      <s:TextInput id="ti3"/>


                  <s:FormItem label="Two">

                      <s:TextInput id="ti4"/>






          • 2. Re: Flex 4 spark validator message
            RiccardoB. Level 1


            I made a custom skin removing the error text and enabling the tooltip.