View Full Version : Blank validation of text field

4 Mar 2014, 5:22 AM
I am facing problem while creating a validation for blank text field.
What happens is that when i focus on that text field for the first time it does'nt show me the error message, but after typing some character in textfield if i erase all the characters it shows me the the error message . Why is that happening.

Code where i have defined validator:

grid = Ext.create('Ext.grid.Panel', {
store : gridStore,
columns : [
header: 'Section/Subsection Name',
dataIndex: 'sectionNameSubsectionName',
width : 200,
field: {
xtype: 'combobox',
allowBlank: false,
editable: false,
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: sectionSubsectionStore,
lazyRender: true,
listClass: 'x-combo-list-small'
text : "Field Name",
dataIndex : 'fieldName',
id : 'fieldName',
sortable : true,
width : 100,
field: {
// allowBlank: false,
// blankText: 'Whoops! You forgot to enter a Field Name.',
validator : function(value){
if(value === null || value === undefined || value === ""){
return "Whoops! You forgot to enter a Field Name.";
} else if(isDuplicate(value)){
return "Whoops! This record already exists. Please create a new record.";
return true;
I have commented out the allowblank and blanktext properties, because it does not work too on first focus. And one more important thing is, when that textfield is focused for the first time that textbox value's length should return 0.. right? but its returning 1. Could that be a prob? and if yes why is so?

I have even tried vtype, but that also works in the same way the validator does.
please help me out, don't know what the problem is?? :(

Thanx in advance. :)

4 Mar 2014, 7:17 AM
This is the expected behavior. Why would you want to display an error on first focus when the editor has not been modified at all?

I would expect this to be a distraction to the user and leaving them wondering why the received and error before they have not been given the chance to update the field.

6 Mar 2014, 10:04 PM
That is the requirement that we need to implement in our project. Is it possible to do that? I have been working on this since last 2 days, but i havnt found any solution yet.

7 Mar 2014, 12:12 AM
you can call the validate method on the field(s) which you want to check when the form is rendered or whenever you want.


e.g. if a field having allowBlank: false is empty and doesnt even had the focus yet, calling validate() on that field will cause it to be marked as invalid (if its blank).

7 Mar 2014, 12:28 AM
If your items are on a form, you can use:


Docs: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-method-isValid
"Any invalid fields will be marked as invalid."
It is also available for FormPanel, here it's just explained better.

7 Mar 2014, 1:55 AM
Thanks all of u for your replies.
i finally came up with this solution.

I called
Ext.getCmp(id).markInvalid("my message") ;method on that textfield's focus event.That worked for me.

Thanks again :)