How to display vtype warning and don't set field invalid?

Question

This code doesn't work for me because I can't do anything with form.isValid(), so I only need to show the tooltip and color textfield border to show user that I don't recommend to use length > 15, but if code does it anyway, its ok.

// I have some field
{
    xtype: 'textfield',
    maskRe: /[0-9.]/,
    vtype: 'imei',
    fieldLabel: 'IMEI:',
    name: 'imei',
    flex: 1
}

// validation for textfield on keypress
    imei: function (v) {
        return v.length < 16;
    },
    imeiText: 'length more then 15 symbols is not recommended'

// validation on save button click
validateForm: function (form) {
    if (!form.isValid()) {
        // don't save form
    }// can't save form because imei is not valid
}

Is there any method to display vtype tooltip, color border and do not set textfield invalid ?

any help in this regards will be appreciated.

Answer 1

you can use listener in your textfield:

listeners: {
                change: function (c, newValue, oldValue) {
                    var tn = newValue.replace(/[^0-9]/g, '');
                    if (tn.length === 0) {
                        setTimeout(function () {
                            c.markInvalid('Imei length must be at least 1 symbol');
                        }, 100);

                    }
                    if (tn.length > 15) {
                        setTimeout(function () {
                            c.markInvalid('Imei length more than 15 symbols is not recommended');
                        }, 100);
                    }
                }
            },

There is a timeout, because base field trigger the markInvalid as '' after pushing event.

Look at example on fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2r9h