TextField AllowBlank to trim spaces

[dviry]

Couldn't find this anywhere, so I thought I'd post it... The AllowBlank parameter on TextFields doesn't trim spaces before validating, and as such would allow empty values. This will make a global validator in such cases:

Ext.apply(Ext.form.TextField.prototype,{ 
    validator:function(text){
        if(this.allowBlank==false && Ext.util.Format.trim(text).length==0)
          return false;
        else
          return true;
    }
});

[tarini]

thanks it works very well...

I think its better to use Ext.override instead of Ext.apply

Ext.override(Ext.form.TextField, { 
    validator:function(text){
        if(this.allowBlank==false && Ext.util.Format.trim(text).length==0)
          return false;
        else
          return true;
    }
}); 

[extjs_new]

hi tarini,

How can I use this? suppose I hava a textfield:

 NameField = new Ext.form.TextField({
    id: 'NameField',
    fieldLabel: 'Name',    
    maxLength: 20,
    allowBlank: false,    
    anchor : '95%',   
    itemCls: 'required',
    maskRe: /([a-zA-Z0-9\s]+)$/  
      }); 

[Condor]

Wouldn't it be easier to simply use

stripCharsRe: /(^\s+|\s+$)/g

in the TextField config?

(this strips leading and trailing spaces from the result, so this also changes the value!)

[vtmoren]

Is there a way to add a delay period before the stripping of chars (in this case spaces) occurs (ex: wait until end-user stops typing)?

[vtmoren]

Nevermind...
Added validationDelay: config option to my TextField and it worked with no problem!

[Acmeous]

Good to know about the validationDelay. Its really required to improve the User Experience.
Thanks

[riuslex]

@ extjs_new

If you need this for all fields, not only those with allowblank=false then use this:

Ext.override(Ext.form.TextField, {
    validator:function(text){
        return (text.length==0 || Ext.util.Format.trim(text).length!=0);
    }
});

Validator receives true when field contains only blanks

This will be valid for all textfields you define, you don't need to enter any other property.
The text.length==0 tests if the field isn't empty. If the field is not empty, but after trimming is empty then you have blanks so the validator receives false.

[jeanphi-jnesis]

The solution proposed by Condor is interesting and will work if you don't allow words containing whitespaces.
Because it applies while you are typing it will remove any space you want to put in the middle of a word,unless you write the word with no space and add them in the end...which is not very user friendly.
maskRe has a similar behaviour except it doesn't remove the unwanted characters, it just doesn't let you type them. This solution also prevent typing a whitespace in the middle of a word.


The only solution I see in the case you allow spaces in the middle is to let the user type the whitespace.
Then you have to decide whether:

• You prefer to mark invalid the field, this could be nice to explain why the user can't type whitespaces:

adding a validator will work but I prefer adding regex:

/^\S.*\S$|^\S$/

and

regexText: 'This field doesn't allow trailing or leading whitespaces'

• Or, you prefer to not mark this on error and then trim() the result just after the value has been input.