PDA

View Full Version : validateOnBlur: false not working on a Ext.form.NumberField



gskluzacek
10 Mar 2011, 8:59 PM
I've got a simple form and wish to use the built in validation methods. However I don't want them validate the fields when the user tabs out of them or on every key press. Rather I want the fields to validate all at once, when the user click a button or something similar.

So I've set the validationEvent and validateOnBlur to false. Setting the validationEvent to false works correctly for both TextFields and NumberFields, but setting validateOnBlur to false does not seem to work for NumberFields.

You can see a demo of the malfunction number field here:

http://ccbdb.com/numeric/

The numeric field is for the range of -100 to +100 and the text field is set for a range of 0 to 5 characters.

If you enter 6 characters in the TextField and then tab out, the field is not marked invalid as expected. When you click the validate button (calls the form's isValid() method), the TextField is marked invalid.

However, if you enter a value of 101 in the numeric field and then tab out the field is immediately mark invalid with the red border and squiggly line.

Thanks for any help on how to fix this.
Regards,
-- Greg

And here is the code...

25085
25086



Ext.onReady(function() {
Ext.QuickTips.init();

var win1 = new Ext.Window({
title: 'My Window',
width: 400,
height: 250,
layout: 'fit',
id: 'testFormWin',
items: [
{
xtype: 'form',
border: false,
padding: '5 5 5 5',
ref: 'testForm',
id: 'testForm',
items: [
{
xtype: 'numberfield',
fieldLabel: 'Numeric Field',
anchor: '100%',
name: 'numericField',
allowDecimals: false,
emptyText: 'enter a positve or negative integer',
selectOnFocus: true,
maxValue: 100,
minValue: -100,
validationEvent: "false",
validateOnBlur: false,
ref: '../numericField',
id: 'numericField'
},
{
xtype: 'textfield',
fieldLabel: 'Another Field',
anchor: '100%',
emptyText: 'just anther field to tab into',
validationEvent: "false",
maxLength: 5,
validateOnBlur: false,
ref: '../anotherField',
id: 'anotherField'
},
{
xtype: 'textfield',
fieldLabel: 'Yet Another',
anchor: '100%'
}
]
}
],
fbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Validate',
ref: '../validateBtn',
id: 'validateBtn',
listeners: {'click':
{
fn: function(btn, evt) {
if (Ext.getCmp('testForm').getForm().isValid()) {
Ext.Msg.alert('validation','OK');
} else {
Ext.Msg.alert('validation','ERROR');
}
}
}
}
}
]
}
});

win1.show();

});

walldorff
11 Mar 2011, 3:04 PM
Maybe you can clear the invalid flag on blur. You can achieve this in 3 ways:
1. with a listener in the config of the field

xtype : 'numberfield',
fieldLabel : 'Numeric Field',
anchor : '100%',
name : 'numericField',
allowDecimals : false,
emptyText : 'enter a positve or negative integer',
selectOnFocus : true,
maxValue : 100,
minValue : -100,
validationEvent : "false",
//validateOnBlur: false, // <=== is now superfluous
ref : '../numericField',
id : 'numericField',
listeners : {
'blur' : function(_field) {
_field.clearInvalid();
}
}

2. or after the initialization

Ext.getCmp('numericField').on('blur',function(_field) {
_field.clearInvalid();
});

win1.show();

3. or write an overwrite for Ext.form.NumberField