In this article, I would talk about the VType component in Sencha/Extjs framework. The official documentation of VTypes is “This is a singleton object which contains a set of commonly used field validation functions and provides a mechanism for creating reusable custom field validations. The following field validation functions are provided out of the box”:
- alpha
- alphanum
- url
So, VTypes can be applied to a Text Field using the vtype configuration in order to validate an email:
1 | Ext.create( 'Ext.form.field.Text' , { |
2 | fieldLabel: 'Email Address' , |
3 | name: 'email' , |
4 | vtype: 'email' // applies email validation rules to this field |
5 | }); |
So, we will continue with 2 examples:
- a first example with a client’s validation of an IP address;
- a second example with a server’s validation of an security number;
1st example: client’s validation of an IP address
We are creating an custom VTypes to validate on client side an IP address filled in a Text Field.
- We declare a custom VTypes for vtype:’IPAddress’:
1
Ext.apply(Ext.form.field.VTypes, {
2
IPAddress:
function
(v) {
3
return
/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
4
},
5
IPAddressText:
'Must be a numeric IP address'
,
6
IPAddressMask: /[\d\.]/i
7
});
- Then, we use our new custom validator (the name of the validator function) as the vtype configuration on a Text Field:
1
Ext.create(
'Ext.form.field.Text'
, {
2
fieldLabel:
'Your IP address'
,
3
name:
'newIPAddress'
,
4
vtype:
'IPAddress'
// applies custom 'IPAddress' validation rules to this field
5
});
… or like:
01
{
02
fieldLabel:
"Your IP addres"
,
03
name:
"newIPAddress"
,
04
id:
'newIPAddress'
,
05
allowBlank:
false
,
06
hideTrigger:
true
,
07
xtype:
'textfield'
,
08
vtype:
'IPAddress'
,
// applies custom 'IPAddress' validation rules to this field
09
value:
''
10
}
The result would be:
… in error case:
… in valid case:
2nd example: server’s validation of an security number
We are creating an custom VTypes to validate on server side if an security number filled in a Text Field, is already used or not. So, our VTypes will use an Ajax request to ask a controller on server side. This server’s service will be accessible via the url ‘myController.do?action=handleCheck_doesSecNumberExists’ and it will return a boolean ‘true’ or ‘false’ depending of security number is already used or not.
- We declare a custom VTypes for vtype:’uniqueSecNum’:
01
var
secNumberAlreadyUsed =
false
;
02
function
setSecNumberAlreadyUsedToFalse() {
03
secNumberAlreadyUsed =
false
;
04
}
05
function
setSecNumberAlreadyUsedToTrue() {
06
secNumberAlreadyUsed =
true
;
07
}
08
09
Ext.apply(Ext.form.VTypes, {
10
uniqueSecNum :
function
(val, field) {
11
var
newSecNumber = Ext.getCmp(
'newSecNumber'
).getValue();
12
if
(
null
!= newSecNumber &&
""
!= newSecNumber) {
13
Ext.Ajax.request(
14
{
15
url:
'myController.do?action=handleCheck_doesSecNumberExists'
,
16
17
params : {
18
newSecNumber: newSecNumber
19
},
// end-params
20
21
success:
function
(response, opts) {
22
var
jsonData = Ext.decode(response.responseText);
23
var
secNumberExists = jsonData.data;
24
if
(secNumberExists) {
25
setSecNumberAlreadyUsedToTrue();
26
}
else
{
27
setSecNumberAlreadyUsedToFalse();
28
}
// end-if
29
},
// end-function
30
31
failure:
function
(response, options) {
32
displayExceptionAlert();
33
}
34
35
}
// end-ajax
36
);
37
}
// end-if
38
return
!secNumberAlreadyUsed;
39
},
// end-function
40
uniqueSecNumText :
'This security number already in use.'
41
});
- Then, we use our new custom validator (the name of the validator function) as the vtype configuration on a Text Field:
1
Ext.create(
'Ext.form.field.Text'
, {
2
fieldLabel:
'Your Security number'
,
3
name:
'newSecNumber'
,
4
vtype:
'uniqueSecNum'
// applies custom 'uniqueSecNum' validation rules to this field
5
});
… or like:
01
{
02
fieldLabel:
"Your Security Number"
,
03
name:
"newSecNumber"
,
04
id:
'newSecNumber'
,
05
allowBlank:
false
,
06
vtype:
'uniqueSecNum'
,
07
hideTrigger:
true
,
08
xtype:
'numberfield'
,
09
value:
''
10
}
The result would be:
… in error case with the hypothesis that the security number ‘123456’ is already used:
… in valid case the hypothesis that the security number ‘1234567’ is not used:
That’s all!!!
Below:
– A page with advanced validation examples using VTypes http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/adv-vtypes.html
– A helpful resource you might refer to is:
http://gskinner.com/RegExr/
– Sencha/ExtJs official RegExp documentation
http://docs.sencha.com/ext-js/4-0/#!/api/RegExp
Best regards,
Huseyin OZVEREN
Hi,
i tried the second example but it’s not working,
did you test it?
Hey will u please check the code and update again
second example is not working
please send new code to my mail id…..