JavaBlog.fr / Java.lu DEVELOPMENT,Sencha,WEB Sencha/ExtJs: Validation fields on the fly with VType

Sencha/ExtJs: Validation fields on the fly with VType

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
  • email
  • url

So, VTypes can be applied to a Text Field using the vtype configuration in order to validate an email:

1Ext.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’:
    1Ext.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:
    1Ext.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’:
    01var secNumberAlreadyUsed = false;
    02function setSecNumberAlreadyUsedToFalse() {
    03    secNumberAlreadyUsed = false;
    04}
    05function setSecNumberAlreadyUsedToTrue() {
    06    secNumberAlreadyUsed = true;
    07}
    08 
    09Ext.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:
    1Ext.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

2 thoughts on “Sencha/ExtJs: Validation fields on the fly with VType”

    1. Hey will u please check the code and update again
      second example is not working
      please send new code to my mail id…..

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Related Post