Setting the minimum and maximum length allowed for a field's value

This recipe shows how to set the minimum and maximum number of characters allowed for a text field. The way to specify a custom error message for this type of validation is also explained.

The login form built in this recipe has username and password fields of a login form whose lengths are restricted:

How to do it...

1. 1. The first thing is to initialize the QuickTips singleton:

   Ext.QuickTips.init();
   

2. 2. Create the login form:

   var loginForm = { xtype: 'form',
   id: 'login-form',
   bodyStyle: 'padding:15px;background:transparent',
   border: false,
   url:'login.php',
   items: [
   { xtype: 'box', autoEl: { tag: 'div',
   html: '<div class="app-msg"> <img src="img/magic-wand.png" class="app-img" /> Log in to The Magic Forum</div>'
   }
   },
   { xtype: 'textfield', id: 'login-user', fieldLabel: 'Username',
   allowBlank: false, minLength: 3, maxLength: 32
   },
   { xtype: 'textfield', id: 'login-pwd', fieldLabel: 'Password', inputType: 'password...