Flex 4-如何在FormItem中设置errorTip？

Question

我是flex 4的新手。在我的示例应用程序中，我正在使用验证器。 它在控件的旁边显示错误消息和图标。 我的问题是，如何删除这些错误消息和错误图标？ 当鼠标悬停在特定控件上时，我想将错误消息显示为errorTip。

谢谢。

编辑

我的示例代码。 我正在与其他一些控件一起使用

<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>

此代码显示带有错误图标的错误消息。

和

<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>

此代码不显示错误图标和错误消息。 当鼠标悬停在TextInput控件上时，它仅显示错误提示。 我想为我的代码提供此错误提示。

更新

        <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>

现在我做到了。

我的当前输出是第一张图片，第二张是我需要的：

Answer 1

我建议您仔细查看Adobe文档中的FLEX示例。 http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f52.html

我认为您需要的内容与“清除验证错误”示例相似，您只需要自动触发验证即可。

更新-这里有一个适合我的示例代码

您需要在textInput上的rollOver事件上调用该方法。

<?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>

Answer 2

您必须重写并修改默认的FormItemSkin.mxml才能执行此操作。

1. 删除errorTextDisplay组件

    <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. 将contentGroup showErrorTip设置为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"> 

请参考这些链接。

链接1和链接2

我相信，它将为您提供帮助