多页表单：使无效字段成为焦点

Posted 2023-02-26

【中文标题】多页表单：使无效字段成为焦点

【英文标题】：Multi-page form: Bring invalid field into focus

【发布时间】：2017-04-21 16:17:14

【问题描述】：

我有一个多页表单，其中有 40 多个字段分布在多个选项卡上，并按可折叠字段集分组。

现在我有这样的情况，在提交表单时，一个字段被检测为无效，我想为用户找到该字段，将其带到可见区域并聚焦它。所以我必须切换到右侧选项卡，如果适用，打开字段集，将字段滚动到可见区域并聚焦它。

我猜 ExtJS 对此有一个功能，但我没有找到。我的代码：

// Get first invalid field. C&P from Ext.form.Basic.isValid function
var invalidField = me.getForm().getFields().findBy(function(f) return !f.isValid(););
if(invalidField) 
    // TODO: Bring the field to front.
    // Now focus the field:
    invalidField.focus();

是否有内置函数可用？

【问题讨论】：

嗨，亚历山大。我有完全相同的问题要解决，但我还没有解决方案，这就是为什么你的问题对我来说非常重要。就我而言，要解决，我正在考虑将表单选项卡验证为选项卡。在一个非常不同的情况下，但也许有兴趣，看看这个帖子：***.com/questions/19354433/…

【参考方案1】：

Ext JS 不提供专门用于执行此操作的内置方法，但它确实提供了所有必要的实用方法并支持动画。至少，确保表单配置为可滚动、设置活动选项卡并关注无效字段足以滚动到正确位置。我创建了一个演示解决方案的小提琴示例。

Sencha Fiddle: An Example of Scrolling to an Invalid Field in a Tab

tabPanel.items.each(function(tab) 
    var formPanel = tab.down('form');
    formPanel.getForm().getFields().each(function(field, index, length) 
        if (!field.isValid()) 
            tabPanel.setActiveTab(tab);
            // Focusing an element will set the correct scroll position.
            // However, an animation can help the user follow along.
            formPanel.setScrollY(field.getPosition()[1], true);
            field.focus();
            return false;
        

        return true;
    );
);

http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-getPosition http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-setScrollY

【讨论】：

我还会检查该字段是否具有 isValid() 方法。表单可以包含没有它的字段。 Ext.isFunction(field.isValid) && !field.isValid()