ExtJS4: How to show validation error message next to textbox, combobox etc

Question

I need to implement validation messages that appear right next to invalid field. Any help would be appreciated.

Answer 1

The msgTarget: 'elementId' can work, but it seem very limited, particularly when you want multiple instances of one reusable ExtJs component (and therefor multiple instances of the same msgTarget element). For example I have an MDI style editor where you can open multiple editors of one type in a tab interface. It also doesn't seem to work with itemId or recognize DOM/container hierarchy.

I therefor prefer to turn off the default handling if I don't want exactly one of the built in message display options by setting msgTarget: none and then performing my own message display by handling the fielderrorchange event which is designed for exactly this scenario. In this case I can now respect hierarchy of my forms even with multiple instances of the same editor form as I can select the error display element relative to the editor.

Here's how I do it:

{
    xtype: 'fieldcontainer',
    fieldLabel: 'My Field Label',
    layout: 'hbox',   // this will be container with 2 elements: the editor & the error
    items: [{
        xtype: 'numberfield',
        itemId: 'myDataFieldName',
        name: 'myDataFieldName',
        width: 150,
        msgTarget: 'none',  // don't use the default built in error message display
        validator: function (value) {
            return 'This is my custom validation message. All real validation logic removed for example clarity.';
        }
    }, {
        xtype: 'label',
        itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
        cls: 'errorBox'     // This class lets me customize the appearance of the error element in CSS
    }],
    listeners: {
        'fielderrorchange': function (container, field, error, eOpts) {
            var errUI = container.down('#errorBox');
            if (error) {
                // show error element, don't esape any HTML formatting provided
                errUI.setText(error, false);
                errUI.show();
            } else {
                // hide error element
                errUI.hide();
            }
        }
    }
}

Answer 2

Use msgTarget 'side' for validation in right side and msgTarget 'under' for bottom

     items: [{
                xtype: 'textfield',
                fieldLabel: 'Name',
                allowBlank: false,
                name: 'name',
                msgTarget: 'side',
                blankText: 'This should not be blank!'
            }]

Answer 3

You can use 'msgTarget: [element id]'. You have to write html in order to use element id instead of itemId. The validation function adds a list element under an element that you set as 'msgTarget'. In case you want to show elements that you want for the validation, you can pass html instead of just a text.

{
    xtype: 'container',
    items: [
        {
            xtype: 'textfield',
            allowBlank: false,
            msgTarget: 'hoge'
            blankText: '<div style="color:red;">validation message</div>', // optional
        },
        {
            xtype: 'box',
            html: '<div id="hoge"></div>' // this id has to be same as msgTarget
        }
    ]
}

Answer 4

See the msgTarget config of the control. msgTarget: 'side' would put the validation message to the right of the control.

Answer 5

msgTarget: 'side' will Add an error icon to the right of the field, displaying the message in a popup on hover only.

if you read the documentation carefully, one more option is there for msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget

[element id] Add the error message directly to the innerHTML of the specified element. you have to add a "td" to the right side of the control dynamically with the id. then if you specify msgTarget: 'element id' it will work.

Answer 6

To show the error message under/side the input text box, msgTarget property will work only in case of you are using the form layout.

To work around this in other than form layout we need to wrap the element in "x-form-field-wrap" class.

you can find more on thread : https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem