ExtJs 4 validate HTML form fields using

vtype It's a good practice to validate the form fields for basic stuff such as required fields before you making

Ajax request by using the method isValid(), basically to keep load off the sever for trivial validations.

Before you can use the isValid() method the field must be specify the validation rules otherwise it will not

throw any errors.

You may be well aware of basic validation such as whether the field is requried or not using the

allowBlank property. By default the allowBlank property is set to true meaning that the textfield can be

left blank. If you set the property to false it will make sure that the field is required. Here is an example defaults: {

anchor: '100%',

allowBlank: false,

msgTarget: 'side',

labelWidth: 75

},

items: [{

xtype: 'textfield',

name: 'filename',

fieldLabel: 'File Name'

}

..........

..........

Now to do other types of validations such as making sure input text value is alphanumeric ExtJs provides

validation type (Ext.form.field.VTypes) object. It contains the following field validation functions right

out of the box

alpha

alphanum

email

url

Here is how to validate a URL using vtype {

xtype: 'textfield',

name: 'myURL',

fieldLabel: 'Website',

vtype: 'url'

}

Tip: If you need to replace the default error message provided by validation type use the VtypeText

configuration option.

ExtJs Custom Validation Types

Now how to do validations not provided by the ExtJs library. You can create custom vtypes and use them

in

your form fields. Here we have created a custom vtype that makes sure the file is a Microsoft Excel by

checking the file extension for xls or xlsx. The example below takes the input value and checks it against

a Regular Expression and returns true or false. You can use any logic in that function based on your

requirement and return true or false to validate the field. It can be used to validate date ranges, making

sure the field data is valid based on some other field that is on the form, etc. Ext.apply(Ext.form.field.VTypes, {

// vtype validation function

file : function(val, field) {

var fileName = /^.*\.(xlsx|xls)$/i;

return fileName.test(val);

},

// vtype Text property to display error Text

// when the validation function returns false

fileText : "File must be Microsoft Excel",

// vtype Mask property for keystroke filter mask

fileMask : /[a-z_\.]/i

});

{

xtype: 'filefield',

id: 'myFile',

emptyText: 'Select a File to Upload',

fieldLabel: 'Select a File',

name: 'fileSelected',

vtype: 'file',

buttonText: '',

buttonConfig: {

iconCls: 'upload-icon'

}

}

Here is another example of custom vtype provided in the Sencha docs to validate an IP Address // custom Vtype 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

});