ExtJS : 2 secs with custom vType

Following another question on ExtJS forum, I’ve created a sample of how to use vType for ExtJS newbies.

Basically, in form submission you need to validate user input and / or prevent user from entering invalid keys. Pure Javascript implementation could be quite a headache to some folks. ExtJS now provides a regex-based validation class called, vType, which helps you to do both things mentioned above.

Demo: a simple Custom vType

You can find more examples at ExtJS 3.1 API: vType


	// QuickTips to display error messages next to form fields
	// Declare a custom VType
	Ext.apply(Ext.form.VTypes, {
                 // This function validates input text
		AlphaNum:  function(v) {                                               
			return /^[a-z0-9]$/i.test(v);
                // This is the tooltip message displayed when invalid input occurs
		AlphaNumText: 'Must be an alphanumeric word',          
                // This mask filter invalid keystrokes
		AlphaNumMask: /[a-z0-9]/i                                         
	// Simple form with a text field for demo purpose
	var myForm = new Ext.FormPanel({
		width: 300,		
		renderTo: Ext.getBody(),
		title: '2 secs with vType Demo',
		items: [
				xtype: 'textfield',
				id: 'alphanum',
				fieldLabel: 'AlphaNum',
				vtype: 'AlphaNum'
		buttons: [
				text: 'Submit',
				handler: function() {
					// myForm.getForm().submit();
					Ext.Msg.alert('Action', 'Form submitted');
			}, {
				text: 'Reset',
				handler: function() {


	<title>ExtJS - VTypes</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
	<script src="../adapter/ext/ext-base.js" type="text/javascript"></script>
	<script src="../ext-all.js" type="text/javascript"></script>

	<script src="js/vtype.js" type="text/javascript"></script>


You need to know a little bit of javascript regular expression in order to configure vType as you want.

Happy coding,


, , ,