0

I am trying to make a "warning field validator" that acts similar to a regular field validator but doesn't invalidate the form and just shows a warning icon with a tooltip next to a field.

What methods should I be overriding? I can probably just slap a div with an icon next to a field, but what would be a neat way of doing it so it is as convenient to use as a regular validator?

1
  • It's a bit of a pig to override in a robust way - you'd be better creating a custom form with methods differentiating between validation for submission and validation for display (which could lookup the actual target fields they care about manually).
    – Emissary
    Mar 8, 2016 at 19:07

3 Answers 3

3

We can achieve this by overriding validateValue of Ext.form.field.Base.

Ext.define('MyApp.overrides.form.field.Base', {
    override: 'Ext.form.field.Base',

    validateValue: function(value) {
        // let validations run as usual.
        var isValid = this.callParent(arguments);

        // warnings related code begin here
        // once the field is valid, then we check for warnings
        if(isValid) {
            var warnings = me.getWarnings(),
                hasWarnings = Ext.isEmpty(warnings);
            if(hasWarnings) {
               me.showWarnings(warnings);
            }
            else {
               me.clearWarnings();
            } 
        }

        return isValid;
    },

    getWarnings: function(value) {
        // do all validations related to warnings.
        // infact we can use the existing vtypes for doing this.
        // i just altered this to support two types of configurations
        // wtype or warnator (Function to Warnate)

        value = arguments.length ? (value == null ? '' : value) : this.processRawValue(this.getRawValue());

        var me = this,
            warnings = [],
            warnator = me.warnator,  // yeah sounds funnny right :D
            wtype = me.wtype,
            vtypes = Ext.form.field.VTypes

        if (Ext.isFunction(warnator)) {
            msg = warnator.call(me, value);
            if (msg !== true) {
                warnings.push(msg);
            }
        }

        if (wtype) {
            if (!vtypes[wtype](value, me)) {
                warnings.push(me.wtypeText || vtypes[wtype +'Text']);
            }
        }

        return warnings;
    },

    showWarnings: functions(warnings) {
        // show the warnings (similar to markInvalid function)
        this.setActiveWarnings(Ext.Array.from(warnings));
    },

    clearWarnings: function() {
       // clear the warnings (similar to clearInvalid function)
       this.unsetActiveWarning();
    }
}

And override the Labelable to show the warnings.

Ext.define('MyApp.overrides.form.Labelable', {
    override: 'Ext.form.Labelable',

    setActiveWarnings: function(warnings) {
        // similar to setActiveErrors
    },

    unsetActiveWarning: function() {
        // similar to unsetActiveError
    }
});

There are couple of other usecases that needs to be handled like enabling and disabling of a field, you may need override the onEnable and onDisable based on your requirement.

Update

Here is the fiddle which shows warning. Validation: Last Name is mandatory. Warning: Last name must contain at-least 3 characters.

https://fiddle.sencha.com/#fiddle/17da

1

Alexander gave a pretty good example to achieve this. According to your answer i made a fiddle with some basic stuff how you can achieve some sort of soft warning directly to the textfield: https://fiddle.sencha.com/#fiddle/16rk

Ext.define('Ext.form.field.MyText', {
    extend:'Ext.form.field.Text',
    listeners: {
        blur: function() {
            if (this.softWarning && this.softWarning == true) {
                this.softValidate();
            }
        }
    },
    softValidate: function() {
        var el = this.inputEl;
        if (el) {
            if (this.getValue().length < 5) {
                el.dom.style.backgroundColor = 'red';
                el.dom.style.color = 'white';
            } else {
                el.dom.style.backgroundColor = '';
                el.dom.style.color = '';
            }
        }

    }
});

Be aware that this is one possible way. I would suggest a combination of both answers for your needs.

4
  • Thanks, but this is pretty much a fully manual solution I was trying to avoid - manually check each field for some condition and manually manipulate dom and inject something there. I am trying to build on existing validatior functionality if possible and have a similar behavior to "validator" property on a field - provide a function that would trigger a warning tooltip display next to error tooltip.
    – serg
    Mar 8, 2016 at 21:08
  • There is no best way to emulate the "validator" behavior of the build in tool. You always have to override/extend the form/fields to achieve this. The best way is to define some sort of behavior and use listeners to trigger the custom validation.
    – Tyr
    Mar 8, 2016 at 21:45
  • I understand, so I want to know what validator/form/field methods I need to override exactly to keep as much of existing validator functionality as possible. Overriding field blur is just doing everything manually without reusing anything. I want to keep 99% of existing validator functionality, not manually recreate it from scratch.
    – serg
    Mar 8, 2016 at 22:06
  • You don't override the blur. You add a blur to all fields automatically. You don't have to do it manually for every field.
    – Tyr
    Mar 9, 2016 at 15:08
0

I would extend Ext.form.Basic like this:

Ext.define('MyApp.form.Basic',{
    extend:'Ext.form.Basic',
    isValid: function() {
        var me = this,
            invalid;
        Ext.suspendLayouts();
        invalid = me.getFields().filterBy(function(field) {
            return !field.validate() && !field.mayBeInvalid;
        });
        Ext.resumeLayouts(true);
        return invalid.length < 1;
    }
});
Ext.define('MyApp.form.Panel',{
    extend:'Ext.form.Panel',
    xtype:'myformpanel',
    createForm: function() {
        var cfg = {},
            props = this.basicFormConfigs,
            len = props.length,
            i = 0,
            prop;

        for (; i < len; ++i) {
            prop = props[i];
            cfg[prop] = this[prop];
        }
        return new MyApp.form.Basic(this, cfg);
    }
});

so you can annotate the fields like this:

xtype:'myformpanel',
items:[{
     xtype:'textfield',
     // this field should be validated.
},{
     xtype:'textfield',
     mayBeInvalid:true // our own extension property
     // this field should not block the form submission
}]

and then you submit as usual.

Completely untested, but you'll do that for me, I guess :)

The alternative, if you really only need it in a single form with a single submit() call, is to do the same thing manually before submission:

var invalidFields = formpanel.getForm().getFields().filterBy(function(field) {
    return !field.validate() && !field.mayBeInvalid;
});
if(invalidFields.length < 1) form.submit({
    clientValidation: false, // do not validate anymore
    ...
})
1
  • Sorry I think this does not what I am after. Are you just trying to skip invalidation for "mayBeInvalid" fields? I'm not trying to skip validation, I'm trying to add another "soft" validation that only shows a warning icon with a message without invalidating the field. So if the required field is empty it should still invalidate it, but if the field value is lets say under 10 then it should be still valid and submittable but have a warning icon next to a field (instead of red exclamation point).
    – serg
    Mar 8, 2016 at 20:11

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.