PDA

View Full Version : [CLOSED][DUP][3.0rc1] In text field the regex is not allow blank



PremiereGlobal
28 Apr 2009, 5:14 AM
In text field the regex is not allow blank. In ext 3.0 example if we give vtype:'email' then also it is not allow blank in case of you enter some text and erase it.

PremiereGlobal
29 Apr 2009, 11:24 AM
Hi,

Looking at the ValidateValue function in ext-3.0-rc1\source\widgets\form\TextField.js I see that there is extra new check has been addded for vType and other conditions.

if(Ext.isFunction(this.validator)){
var msg = this.validator(value);
if(msg !== true){
this.markInvalid(msg);
return false;
}
}
if(this.vtype){
var vt = Ext.form.VTypes;
if(!vt[this.vtype](value, this)){
this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
return false;
}
}
if(this.regex && !this.regex.test(value)){
this.markInvalid(this.regexText);
return false;
}

This function return false if user try to clear the invalid value and does not fill any value.
ideally if user has not put allowBlank:false on this field along with vtype then on clearing the invalid value it should not do any validation.

Can this be treated as a bug to fix in full release?

PremiereGlobal
29 Apr 2009, 11:26 AM
This issue can be reproduced on xml-form.html in examples folder.
Steps:1. enter some invalid value in email field e.g. 'test'. You get the error.
2. then clear the invalid value. error should go (as per behavior in ext2.2)

aconran
4 May 2009, 10:43 AM
Could you please explain in detail what the expected behavior is? We have made changes in allowBlank in 3.0 so that allowBlank does not immediately validate and void any potential vtype configuration.

worthy
5 May 2009, 12:05 PM
Code sample:


new Ext.form.TextField({
vtype: 'email',
allowBlank: true
});


And now in Ext 3.0 if field is empty and you try to validate you get invalid field and message: 'This field should be an e-mail address in the format "user@domain.com"'

In Ext 2.x there was no message and field was valid.

All of this is caused by different order of validation rules.
Ext 3.0:


validateValue : function(value){
// this.validator

// this.vtype - email vtype retrun false on test and message appears

// this.regex

// this.allowBlank

// this.minLength AND this.maxLength
},


Ext 2.x:


validateValue : function(value){
// this.allowBlank

// this.minLength AND this.maxLength

// this.vtype

// this.validator

// this.regex
},


I don't know what motivated authors to change, but I think best order of validation will be:


validateValue : function(value){
// this.allowBlank - if blank we don't have anything to validate

// this.minLength AND this.maxLength - simplest tests

// this.vtype - standard format test

// this.regex - user format test

// this.validator - it can have "business" logic validation so do it if format of value is correct
},

aconran
5 May 2009, 12:45 PM
Premiere -

The motivation behind the change was because previously allowBlank would override all other validation once it validated.

iwtlf
7 May 2009, 4:26 PM
So it's not going to be "fixed"? It definitely seems logical to me that if allowBlank is not set to false (or at least when explicitly set to true) then a blank field should always validate no matter what.

worthy
8 May 2009, 12:06 AM
Bellow is my proposition. This is function with my favorite order and with duplication of code for custom validator.



Ext.override(Ext.form.TextField, {
validateValue : function(value){
if(value.length < 1 || value === this.emptyText){ // if it's blank
if(this.allowBlank){

// Check custom validation on empty value
// Don't use 'value' variable cause it may contains 'this.emptyText'
if(Ext.isFunction(this.validator)){
var msg = this.validator('');
if(msg !== true){
this.markInvalid(msg);
return false;
}
}

// Don't check other (length, vtype, regex) validators cause it dosen't have sense.
// On empty value they are always false.

this.clearInvalid();
return true;
}else{
this.markInvalid(this.blankText);
return false;
}
}

if(value.length < this.minLength){
this.markInvalid(String.format(this.minLengthText, this.minLength));
return false;
}
if(value.length > this.maxLength){
this.markInvalid(String.format(this.maxLengthText, this.maxLength));
return false;
}

if(this.vtype){
var vt = Ext.form.VTypes;
if(!vt[this.vtype](value, this)){
this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
return false;
}
}

if(this.regex && !this.regex.test(value)){
this.markInvalid(this.regexText);
return false;
}

if(Ext.isFunction(this.validator)){
var msg = this.validator(value);
if(msg !== true){
this.markInvalid(msg);
return false;
}
}

return true;
}
});

evant
8 May 2009, 12:20 AM
The problem is really in the naming. allowBlank implies blank is tolerated but not necessarily a valid value.

allowBlank was behaving as blankValid.

I think we need a way to shift the behaviour to have 2 properties

1) Blank is allowed, but continue with validation
2) Blank is a valid value

Chimera
8 May 2009, 12:29 PM
Yes, there is definitely need for another property: required.

I have a form where we can add new customers, it's a retail store so an e-mail address isn't required... Now in 3.0, I cannot tab through the form and not type an e-mail address without getting the validation-error. I cannot submit the form at all without figuring out a workaround, but an e-mail field that isn't required should be possible out of the box, in my opinion.

worthy
9 May 2009, 2:21 AM
The problem is really in the naming. allowBlank implies blank is tolerated but not necessarily a valid value.

allowBlank was behaving as blankValid.

I think we need a way to shift the behaviour to have 2 properties

1) Blank is allowed, but continue with validation
2) Blank is a valid value

What do you want to validate if blank is allowed(1)? Against regex or maxLength? I think only this.validate is reasonable.

Adding another option will be ambiguous cause what will this mean:


this.allowBlank = true;
this.blankValid = false;

// or

this.allowBlank = false;
this.blankValid = true;


allowBlank in my opinion is clear. Blank is allowed or not.

Condor
9 May 2009, 2:42 AM
It not only needs to check validate, but also vtype (e.g. for vtype:'password' blank is only valid when the original password is also valid).

But I agree that adding another config option (blankValid, default true) would be a better (and Ext 2.x compatible) solution:

Ext.override(Ext.form.TextField, {
blankValid : true,
validateValue : function(value){
if(value.length < 1 || value === this.emptyText){
if(!this.allowBlank){
this.markInvalid(this.blankText);
return false;
}
if(this.blankValid){
this.clearInvalid();
return true;
}
}
if(Ext.isFunction(this.validator)){
var msg = this.validator(value);
if(msg !== true){
this.markInvalid(msg);
return false;
}
}
if(this.vtype){
var vt = Ext.form.VTypes;
if(!vt[this.vtype](value, this)){
this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
return false;
}
}
if(this.regex && !this.regex.test(value)){
this.markInvalid(this.regexText);
return false;
}
if(value.length < this.minLength){
this.markInvalid(String.format(this.minLengthText, this.minLength));
return false;
}
if(value.length > this.maxLength){
this.markInvalid(String.format(this.maxLengthText, this.maxLength));
return false;
}
return true;
}
});

Chimera
9 May 2009, 2:57 AM
I really hope that makes it to the next release, because it works like a charm :)

Thanks Condor!

worthy
9 May 2009, 4:03 AM
And what with validators precedence?
Why length is validated after regex? Why we should call this.validate (may be expensive call: dom access, for loops or somethig) if format is wrong?

So in your proposition if I set:


this.allowBlank = false;
this.blankValid = true;

It will mark and then unmark my field? Hm.

My proposition is 2.2.x compatible. (Tested)
And any password validator could set and unset the allowBlank flag.

PS: Where I can find code of vtype:'password'?

Condor
9 May 2009, 4:42 AM
I am assuming that almost all fields have either:
1. a validator function
2. a vtype
3. other field settings
but not a combination of the above.
This makes the validation order not really relevant.

Setting allowBlank:false makes the setting of blankValid irrelevant. Blank is always invalid.

The password and daterange vtypes can be found in examples/form/adv-vtypes.js.

mjlecomte
3 Jun 2009, 12:59 PM
Marking this thread as [DUP] in favor of the more recent thread here:
http://extjs.com/forum/showthread.php?p=335822#post335822

The linked thread also links back to this thread.

aconran
18 Jun 2009, 7:34 AM
The behavior has been changed in Ext 3.0 as of revision 4467 (Post RC2) to run the validators in validateValue in the following order:
validator, allowBlank, minLength, maxLength, vtype then regex

http://extjs.com/forum/showthread.php?t=69859&p=345729