ExtJS4：如何在文本框、组合框等旁边显示验证错误消息

Posted 2023-02-26

【中文标题】ExtJS4：如何在文本框、组合框等旁边显示验证错误消息

【英文标题】：ExtJS4: How to show validation error message next to textbox, combobox etc

【发布时间】：2012-06-03 13:41:29

【问题描述】：

我需要实现显示在无效字段旁边的验证消息。任何帮助将不胜感激。

【问题讨论】：

这是直接的例子。通过它们，您会得到更好的服务。

@DmitryB，感谢您的回复。你能给我一些例子吗？请在下面阅读我对 JohnnyHK 的评论。

我收回我的评论。开箱即用显示完整错误消息的唯一方法是使用 'under' msgTarget - 请参阅此示例中的电话字段：docs.sencha.com/ext-js/4-1/#!/example/form/fieldcontainer.html@Jomet 下面提到元素 ID 女巫需要更多工作，但这就是您将拥有的去做。

【参考方案1】：

msgTarget: 'side' 将在字段右侧添加一个错误图标，仅在悬停时在弹出窗口中显示消息。

如果您仔细阅读文档，msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget 的另一个选项是

[element id] 将错误信息直接添加到指定元素的innerHTML中。 您必须使用 id 在控件的右侧动态添加一个“td”。那么如果你指定msgTarget: 'element id' 它将起作用。

【参考方案2】：

msgTarget: 'elementId' 可以工作，但它似乎非常有限，特别是当您想要一个可重用 ExtJs 组件的多个实例时（以及因此同一个 msgTarget 元素的多个实例）。例如，我有一个 MDI 样式编辑器，您可以在其中在选项卡界面中打开一种类型的多个编辑器。它似乎也不适用于 itemId 或识别 DOM/容器层次结构。

因此，如果我不希望通过设置 msgTarget: none 来完全使用内置消息显示选项之一，然后通过处理专为正是这种情况。在这种情况下，即使有同一个编辑器表单的多个实例，我现在也可以尊重表单的层次结构，因为我可以选择相对于编辑器的错误显示元素。

我是这样做的：

    xtype: 'fieldcontainer',
    fieldLabel: 'My Field Label',
    layout: 'hbox',   // this will be container with 2 elements: the editor & the error
    items: [
        xtype: 'numberfield',
        itemId: 'myDataFieldName',
        name: 'myDataFieldName',
        width: 150,
        msgTarget: 'none',  // don't use the default built in error message display
        validator: function (value) 
            return 'This is my custom validation message. All real validation logic removed for example clarity.';
        
    , 
        xtype: 'label',
        itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
        cls: 'errorBox'     // This class lets me customize the appearance of the error element in CSS
    ],
    listeners: 
        'fielderrorchange': function (container, field, error, eOpts) 
            var errUI = container.down('#errorBox');
            if (error) 
                // show error element, don't esape any HTML formatting provided
                errUI.setText(error, false);
                errUI.show();
             else 
                // hide error element
                errUI.hide();
            
        
    

【参考方案3】：

查看控件的msgTarget 配置。 msgTarget: 'side' 会将验证消息放在控件的右侧。

【讨论】：

感谢您的回复，但此选项仅在控件右侧放置感叹号图标，而不是消息。我需要出现消息，而不是作为图标的工具提示。

【参考方案4】：

使用 msgTarget 'side' 验证右侧，使用 msgTarget 'under' 验证底部

     items: [
                xtype: 'textfield',
                fieldLabel: 'Name',
                allowBlank: false,
                name: 'name',
                msgTarget: 'side',
                blankText: 'This should not be blank!'
            ]

【参考方案5】：

您可以使用“msgTarget：[元素 ID]”。您必须编写 html 才能使用元素 id 而不是 itemId。验证函数在您设置为“msgTarget”的元素下添加一个列表元素。 如果您想显示验证所需的元素，您可以传递 html 而不仅仅是文本。

    xtype: 'container',
    items: [
        
            xtype: 'textfield',
            allowBlank: false,
            msgTarget: 'hoge'
            blankText: '<div style="color:red;">validation message</div>', // optional
        ,
        
            xtype: 'box',
            html: '<div id="hoge"></div>' // this id has to be same as msgTarget
        
    ]

【参考方案6】：

要在输入文本框下方/侧显示错误消息，msgTarget 属性仅在您使用表单布局的情况下才有效。

要在表单布局之外解决这个问题，我们需要将元素包装在“x-form-field-wrap”类中。

您可以在线程上找到更多信息： https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem