PDA

View Full Version : Validator for textFields



jvolt
20 Jul 2010, 11:15 AM
Hello,

I'm trying use the property "validator" on textFields but that isn't available.

I've used some functions to "mask/format" some fields, but using the Designer I'm not able.

i.e:


function maskDate( obj ){
v = obj.value;
var max = 10;

v=v.replace(/\D/g,"")
v=v.replace(/(\d{2})(\d)/,"$1/$2");
v=v.replace(/(\d{2})(\d)/,"$1/$2");
obj.value = v;
return true;
}
[...]
{
fieldLabel: 'Telefone',
name: 'fone',
id: 'fone',
validator : function(){
return maskFone(document.getElementById('fone'));
}
}


I'm not sure if there's some better way to make that, but has worked very well...

jarrednicholls
20 Jul 2010, 12:39 PM
Instead of defining the validator function inline (which you cannot through the Designer, since we omitted it on purpose) you can register your validation function in the VTypes object instead, and use the "vtype" config option.

See http://www.sencha.com/deploy/dev/docs/?class=Ext.form.TextField&member=vtype and http://www.sencha.com/deploy/dev/docs/?class=Ext.form.VTypes for more information.

jvolt
21 Jul 2010, 11:13 AM
Well, that haven't same action. I want a mask to replace the typed text for a formatted one. ie. While the user type "1234567" the field receive the value (12) 3456-7.

The examples at: http://www.sencha.com/deploy/dev/docs/?class=Ext.form.VTypes don't work so, it just show an error icon with a message if the user didn't type using the right format.

I've used the following code:


var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
Ext.apply(Ext.form.VTypes, {
// vtype validation function
time: function(val, field) {
return timeTest.test(val);
},
// vtype Text property: The error text to display when the validation function returns false
timeText: 'Not a valid time. Must be in the format "12:34 PM".',
// vtype Mask property: The keystroke filter mask
timeMask: /[\d\s:amp]/i
});

On my textField, used the vtype: 'time'.


Tested on Firefox 3.6.6, firebug does not display any errors, but that still does not work as a formatted mask, just validate the field...

jarrednicholls
22 Jul 2010, 4:52 AM
Well that's because you're just testing the value, you're not setting the value :-) And you get an error message because you're calling test() on the regular expression, which will return false if it doesn't match. If you just want a formatting mask, then always return true. All you need to do is change your validator function so it sets the value and returns true, just like you do in your "maskDate" function you pasted in your first post.

Every VTypes function, when called, is passed two arguments: the value, and the text field itself. So you can set the value of the field in the VTypes function, thus making it act like a formatting mask. This is even better than specifying the "validator" config, because that function is only called with the value as a single argument and does not pass in a reference to the field itself.

Let's take your "maskDate" as an example, since you pasted that in your first post. Here's how we can register it as a VType and use it:



Ext.apply(Ext.form.VTypes, {
maskDate: function(v, f){
// v is the value
// f is the text field instance
var max = 10;

v = v.replace(/\D/g,"");
v = v.replace(/(\d{2})(\d)/,"$1/$2");
v = v.replace(/(\d{2})(\d)/,"$1/$2");

// Notice we call setRawValue() instead of setValue() in order to
// bypass validation, which would be redundant and cause an
// infinite loop :-)
f.setRawValue(v);

return true;
}
});

...

{
fieldLabel: 'Some Date',
name: 'my_date',
vtype: 'maskDate'
}


Hope that helps :-)

P.S. I am moving this thread to the Help forum since this is not a bug, and others might benefit from reading this. Thanks.

jvolt
22 Jul 2010, 11:32 AM
Thanks very much jarred. That works exactly as before!

jarrednicholls
22 Jul 2010, 11:45 AM
You bet, no problem at all. Having those functions registered as VTypes make them a little more reusable, and I find that it makes cleaner code for the form fields.

Thandayuthapani
1 Aug 2010, 8:17 PM
Hi Everyone, i'm new to EXTJS. I have created a textfield but according to my requirement it should support only alphabets. So Can u tell me how to validate that textfield

j-joey
2 Aug 2010, 4:46 AM
you can use maskRe property which will accept regular expressions. the given regex will validate the input characters when you press the keys. if test of regex returns false, it will not accept the input,

for only alphas, just set your field's maskRe to /^[A-Za-z]+$/

for more information about maskRe check docs

Thandayuthapani
2 Aug 2010, 10:33 PM
Which doc i have to refer? Can u please send me the exact coding..

j-joey
3 Aug 2010, 3:48 AM
TextField documentation on ExtJS Docs (http://www.sencha.com/deploy/dev/docs/?class=Ext.form.TextField)

j-joey
3 Aug 2010, 8:13 AM
you can just set your textfields maskRe property to /^[A-Za-z]$/ to let ony alpha chars.

if you're looking for a regex tutorial http://www.regular-expressions.info/ is a good one