如何避免对 Extjs 4 中的隐藏字段进行验证答案

【问题标题】：How to avoid validation on hidden fields in Extjs 4如何避免对 Extjs 4 中的隐藏字段进行验证
【发布时间】：2015-05-07 16:38:24
【问题描述】：

当容器有 hidden: true 而不是实际字段时，我如何不验证隐藏字段

为了解决这个问题，我做了以下覆盖，它成功了，尽我所能不影响正常的验证流程，所以代码看起来不太好。

/* traverse up and look for a hidden Parent/Ancestor */
Ext.override(Ext.form.field.Base, {
    isParentHidden: function () {
        return this.up('[hidden=true]');
    }
});

/* override isValid basic method to consider skipValidateWhenHidden property, 
when skipValidateWhenHidden is set to true code should check if the elementor it's Parent/Ancestors is hidden */
Ext.override(Ext.form.field.Base, {
    isValid: function () {      
        var me = this,
            disabled = me.disabled,
            isHidden = me.isHidden(),
            skipValidateWhenHidden = !!me.skipValidateWhenHidden,
            validate = me.forceValidation || !disabled,
            isValid = validate ? me.validateValue(me.processRawValue(me.getRawValue())) : disabled;

        if (isValid || !skipValidateWhenHidden) {
        return isValid;
        }

        if (skipValidateWhenHidden) {
            isHidden = isHidden ? true : me.isParentHidden();
            if (isHidden) {
                return skipValidateWhenHidden;
            }
        }

        return isValid;
    }
});

最终我将能够执行以下操作，将字段上的属性设置为 true，因此如果它对用户不可见，它将在验证后继续存在

 {
      itemId: 'City',
      cls: 'AddressCity',
      xtype: 'textfield',
      emptyText: emptyCityText,
      skipValidateWhenHidden: true,
 },

【问题讨论】：

标签： javascript extjs extjs4 extjs4.1

【解决方案1】：

当父级隐藏时禁用字段可能更容易。正如documentation 所说，禁用的字段会自动被视为有效。

然后您可以按视图处理此问题，并在父显示/隐藏事件上实现侦听器以启用/禁用其中的表单字段。

【讨论】：

我已经考虑过我知道禁用按钮会使它们跳过验证，但就我而言，我正在动态显示和隐藏父级的父级并在执行显示和隐藏时管理字段状态是不容易
为了清楚起见，我整理了一个JSFiddle 来说明这个想法。在我在fieldcontainer 上实现的简单侦听器中，我查询容器下的所有field 组件。因此，理论上，无论父级如何显示或隐藏，这些字段都会自动为您禁用/启用。只是想我会把一些东西放在一起看看是否对你有帮助。
谢谢，这看起来像是对许多但不是所有情况的有效解决方案，同样，如果再嵌套一层，它将不起作用，例如在我的情况下，我有一个地址类，并且我有 CityStateZip 类的一个级别。我知道它不应该是嵌套的，但考虑到这些类附带的逻辑和代码量我是有道理的。无论如何，谢谢你的建议。我的一位同事在 mixins 中做了同样的事情。

【解决方案2】：

我遇到了同样的情况，最终这样做了：

if (!me.isFormValid(form)) {
    ...
}

isFormValid: function (form) {
    var isValid = true,
        fields = form.getForm().getFields();

    fields.each(function (field) {
        if (!field.isHidden || (field.isHidden && !field.isHidden())) {
            isValid = isValid && field.isValid();
        }
    });

    return isValid;
},

【讨论】：