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:

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

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