4.2.1 radiogroup and checkboxgroup invalid border

[chocis]

Hi. After going from 4.2.0 to 4.2.1 we noticed a bug that radiogroup and checkbox group doesnt show a red border when validation on them is invalid.
I am not sure if it is a bug or default behavior in newest version, but seems like a bug, because it isn't mentioned in releas notes.
It can be seen in official examples too:
http://docs.sencha.com/extjs/4.2.1/#...eck-radio.html

The problem is simply, that 'x-form-invalid' class isn't added when validation fails. If it is a bug then a workaround is to add:
invalidCls: 'x-form-invalid'

*EDIT BY SLEMMON
Issue observed in 4.2.1 in Classic and Neptune. Tested ok in 4.2.0.
Test case:

Ext.create('Ext.form.Panel', {
    title: 'Checkbox Group',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'checkboxgroup',
        fieldLabel: 'Two Columns',
        allowBlank: false,
        // Arrange checkboxes into two columns, distributed vertically
        columns: 2,
        vertical: true,
        items: [
            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
            { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
            { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
        ]
    }, {
        xtype: 'radiogroup',
        fieldLabel: 'Two Columns',
        // Arrange radio buttons into two columns, distributed vertically
        columns: 2,
        vertical: true,
        allowBlank: false,
        items: [
            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
            { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
            { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
        ]
    }],
    listeners: {
        boxready: function () {
            this.isValid();
        }
    }
});

[slemmon]

Thanks for the report! I have opened a bug in our bug tracker.

[JacobGu]

Why was this bug NOT fixed in 4.2.2 ?

[BluemindSoftware]

It's a problem for me as well.

[Daniil]

Hi,

Today I faced the same issue and investigated it. The bug has been introduced somewhere between 4.2.0 and 4.2.1.744 when the FieldContainer class got this option:

invalidCls: ''

So, the CheckboxGroup class (and the RadioGroup one further) inherited that option.

The fix is:

Ext.form.CheckboxGroup.override({
    invalidCls: Ext.baseCSSPrefix + 'form-invalid'
});

[szub]

Not fixed in 5.1.1

[devtig]

Wow, never would expect to still be needing this in 6.2.1

[Solovyevk]

Still not fixed in 6.5.3

[bogc]

Doesn't appear to be fixed in 6.6.0. Daniil's workaround doesn't work in 6.6.0 for a RadioGroup.

Update After more testing, Daniil's workaround actually works in 6.6.0 - I was originally wrong.

[fordprefect]

Confirming this is still an issue with 6.6.