Flex 4 - How to set errorTip in FormItem?

问题:

I am the new one for flex 4. In my sample application, I am using validator. It display's the error message and icon at beside's of the control. My question is, How to remove these error message and error icon? And I want to display my error message as a errorTip when the mouse is over the particular control.

Thank you.

Edit

My sample code. I am using this with some other controls

<fx:Declarations>
    <mx:StringValidator id="nameValidator"
                        source="{employeeName}"
                        property="text"
                        tooLongError="Too long error"
                        tooShortError="Too short error"
                        maxLength="20" minLength="4"/>

</fx:Declarations>

<s:layout>
    <s:VerticalLayout/>
</s:layout>
<mx:HDividedBox>
    <s:Panel>
        <s:Form>
            <s:FormItem>                        
                <s:TextInput id="employeeName"/>                        
            </s:FormItem>
            <s:FormItem>                        
                <s:TextInput id="employeeID"/>                      
            </s:FormItem>
        </s:Form>
    </s:Panel>
</mx:HDividedBox>

This code display the error message with error icon.

And

<fx:Declarations>
    <mx:StringValidator id="nameValidator"
                        source="{employeeName}"
                        property="text"
                        tooLongError="Too long error"
                        tooShortError="Too short error"
                        maxLength="20" minLength="4"/>

</fx:Declarations>

<s:layout>
    <s:VerticalLayout/>
</s:layout>
<mx:HDividedBox>
    <s:Panel>
        <s:Form>                    
            <s:TextInput id="employeeName" />
            <s:TextInput id="employeeID" />
        </s:Form>
    </s:Panel>
</mx:HDividedBox>

This code doesn't display the error icon and error message. And it display only the error tip when mouse is over the TextInput control. I want this error tip for my code.

Update

        <mx:StringValidator
        id="userName"
        source="{employeeName}"
        property="text"
        minLength="4" maxLength="20"
        triggerEvent="rollOver"
        trigger="{employeeName}"/>
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<mx:HDividedBox>
    <s:Panel>
        <s:Form>
            <s:FormItem>    
                <mx:HBox>   
                <s:TextInput id="employeeName"/>
                                </mx:HBox>                      
            </s:FormItem>
            <s:FormItem>                        
                <s:TextInput id="employeeID"/>                      
            </s:FormItem>
        </s:Form>
    </s:Panel>
</mx:HDividedBox>

Now I did this.

My Current Output is first picture , And the second one is I need:

回答1:

You have to override and modify the default FormItemSkin.mxml to do it.

1. Remove the errorTextDisplay component

   <s:RichText id="errorTextDisplay" includeIn="errorStates"
           fontStyle="italic" fontWeight="normal" color="0xFE0000"
           left="helpCol:27" right="helpCol:10"
           bottom="row1:5" baseline="row1:0" 
           maxDisplayedLines="-1"/> 
   

2. Set contentGroup showErrorTip to true

   <!-- Don't show the error tip on the content elements -->
   <s:Group id="contentGroup" showErrorTip="true" showErrorSkin="true"
        left="contentCol:0" right="contentCol:1" 
        baseline="row1:0" bottom="row1:5">
   

Refer these links.

link 1 and Link 2

I am sure, It will help you

回答2:

I suggest you have a closer look at the FLEX samples in Adobe docs. http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f52.html

I think what you need is similar with the "Clearing a validation error" sample, you just need to trigger the validation automatically.

UPDATE - HERE A SAMPLE CODE THAT WORKS FOR ME

Youn need to call the method on the rollOver event on the textInput...

<?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" minWidth="955" minHeight="600">


<s:layout>
    <s:VerticalLayout/>
</s:layout>

<fx:Declarations>
    <mx:StringValidator
        id="userNameValidator"
        source="{employeeName}"
        property="text"
        minLength="4" maxLength="20"/>
</fx:Declarations>

<fx:Script>
    <![CDATA[

        import mx.events.ValidationResultEvent;
        private var vResult:ValidationResultEvent;

        // Function to validate data and submit it to the server. 
        private function validateAndSubmit():void {
            // Validate the required fields. 
            vResult = userNameValidator.validate();
            if (vResult.type==ValidationResultEvent.INVALID) 
                return;             
        }

        // Clear the input controls and the errorString property 
        // when resetting the form. 
        private function resetForm():void {
            employeeName.text = '';
            employeeName.errorString = '';
        }
    ]]>
</fx:Script>

<mx:HDividedBox>
    <s:Panel>
        <s:Form>
            <s:FormItem>    
                <s:TextInput 
                    id          = "employeeName"
                    rollOver    = "validateAndSubmit()"/>
            </s:FormItem>
            <s:FormItem>                        
                <s:TextInput 
                    id          = "employeeID"/>                      
            </s:FormItem>
            <s:FormItem>                        
                <s:Button
                    label       = "Clear"
                    click       = "resetForm()"/>

            </s:FormItem>
        </s:Form>
    </s:Panel>
</mx:HDividedBox>   


</s:Application>