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:
Ext.create('Ext.form.field.Text', { fieldLabel: 'Email Address', name: 'email', vtype: 'email' // applies email validation rules to this field });
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’:
Ext.apply(Ext.form.field.VTypes, { IPAddress: function(v) { return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v); }, IPAddressText: 'Must be a numeric IP address', IPAddressMask: /[\d\.]/i });
- Then, we use our new custom validator (the name of the validator function) as the vtype configuration on a Text Field:
Ext.create('Ext.form.field.Text', { fieldLabel: 'Your IP address', name: 'newIPAddress', vtype: 'IPAddress' // applies custom 'IPAddress' validation rules to this field });
… or like:
{ fieldLabel:"Your IP addres", name:"newIPAddress", id: 'newIPAddress', allowBlank:false, hideTrigger:true, xtype: 'textfield', vtype: 'IPAddress', // applies custom 'IPAddress' validation rules to this field value: '' }
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’:
var secNumberAlreadyUsed = false; function setSecNumberAlreadyUsedToFalse() { secNumberAlreadyUsed = false; } function setSecNumberAlreadyUsedToTrue() { secNumberAlreadyUsed = true; } Ext.apply(Ext.form.VTypes, { uniqueSecNum : function(val, field) { var newSecNumber = Ext.getCmp('newSecNumber').getValue(); if (null != newSecNumber && "" != newSecNumber) { Ext.Ajax.request( { url: 'myController.do?action=handleCheck_doesSecNumberExists', params : { newSecNumber: newSecNumber }, // end-params success: function(response, opts) { var jsonData = Ext.decode(response.responseText); var secNumberExists = jsonData.data; if (secNumberExists) { setSecNumberAlreadyUsedToTrue(); } else { setSecNumberAlreadyUsedToFalse(); } // end-if }, // end-function failure: function (response, options) { displayExceptionAlert(); } } // end-ajax ); } // end-if return !secNumberAlreadyUsed; }, // end-function uniqueSecNumText : 'This security number already in use.' });
- Then, we use our new custom validator (the name of the validator function) as the vtype configuration on a Text Field:
Ext.create('Ext.form.field.Text', { fieldLabel: 'Your Security number', name: 'newSecNumber', vtype: 'uniqueSecNum' // applies custom 'uniqueSecNum' validation rules to this field });
… or like:
{ fieldLabel:"Your Security Number", name:"newSecNumber", id: 'newSecNumber', allowBlank:false, vtype: 'uniqueSecNum', hideTrigger:true, xtype: 'numberfield', value: '' }
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…..