Sencha Touch 2.3: Remove validations from hidden form fields

Question

I am doing form validations in Sencha Touch 2.3. My model looks like following.

Ext.define('net.omobio.dialog.dialogcc.model.StockTransferDetails', {
extend: 'Ext.data.Model',

config: {
    fields: ['to_msisdn','to_profile_id','transfer_lob','transfer_item_status','transfer_product','transfer_qty','transfer_req_type','transfer_item_type','transfer_pack_type'],
    validations: [
        { type: 'presence', field: 'to_msisdn' },
        { type: 'presence', field: 'to_profile_id' },
        { type: 'exclusion', field: 'transfer_lob', list: ['null'] },
        { type: 'exclusion', field: 'transfer_req_type', list: ['null'] },
        { type: 'exclusion', field: 'transfer_item_type', list: ['null'] },
        { type: 'exclusion', field: 'transfer_pack_type', list: ['null'] }
    ]
}
});

Following is a code segment that I use in my controller to remove validations from hidden form fields but no luck.

var form1 = me.getStockTransferRequestPage();
    var model = Ext.create("net.omobio.dialog.dialogcc.model.StockTransferDetails", form1.getValues());

    // validate form fields
    var errors = model.validate();

    if (!errors.isValid()) {
        // loop through validation errors and generate a message to the user
        errors.each(function (errorObj){
            //errorString += errorObj.getField() + " " + errorObj.getMessage();
            console.log('7777777777777777777    '+errorObj.getField());
            if (!Ext.getCmp(errorObj.getField().toString()).isHidden()) {
                var s = Ext.String.format('field[name={0}]',errorObj.getField());
                form1.down(s).addCls('invalidField');
            }

        });
        Ext.Msg.alert('','stock_transfer.errors.required_fields_empty');
    }

I would be much appreciated if anyone could help me to solve this.

Thank you

"Ext.getCmp()" takes id of the component and i am not sure "errorObj.getField().toString()" will return id of component.. is it ? — Viswa, May 08 '15 at 11:31

Monte Alawamleh · Answer 1 · 2015-05-08T20:26:37.323

so there are multiple ways to achieve this, my preference even though some folks won't like it, but it will always work.

I did the following override to solve this problem, tried my best not to affect the normal flow of validation.the first two overrides have to be added somewhere to your overrides folder, you only have to add them once for the whole app.

Ext.Define('Ext.form.field.BaseOverride', {
    override: 'Ext.form.field,Base',        
/* traverse up and look for a hidden Parent/Ancestor */
    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 */ 
    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;
    }
});

and eventually you'll be able to do the following, which is set the property to true on any field so if its not visible for the user, it will survive validation

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

another approach is to add a show()/Hide() listener on the fields container to enable/disable the children, disabling the fields would make them skip validation, but i'm not a big fan of managing button states and wiring listeners.

I do like the idea I would just use a different syntax for the override http://stackoverflow.com/questions/30082698/difference-between-class-override-vs-ext-defineclass-override-class and there is no need to have two different overrides for the same class (I think) — code4jhon, May 08 '15 at 18:27
Thanks for the notes code4jon, i updated the code due to your notes, thanks again — Monte Alawamleh, May 08 '15 at 18:59
Thanks for your answer Monte. I am a newbie to Secha Touch. What do you mean by 'somewhere to your overrides folder' ? May I add above code into my controller ? — Rose18, May 09 '15 at 04:19
here is a link that might help, overriding is one of the strength points of ExtJS, it introduces a lot flexibility: http://moduscreate.com/writing-ext-js-overrides/ — Monte Alawamleh, May 11 '15 at 15:16

score 0 · Answer 2 · answered May 08 '15 at 11:46

0

Note

Ext.getCmp() takes component id
errorObj.getField().toString() returns model field name, It won't return id of the component (hidden) field.

So if model field name matches with hidden field id, It will work. Otherwise it won't work.

answered May 08 '15 at 11:46

Viswa

3,211
5
34
65

Sencha Touch 2.3: Remove validations from hidden form fields

2 Answers2