Confirming passwords and validating dates using relational field validation

Frequently, you face scenarios where the values of two fields need to match, or the value of one field depends on the value of another field.

Let's examine how to build a registration form that requires the user to confirm his or her password when signing up.

How to do it...

1. 1. Initialize the QuickTips singleton:

   Ext.QuickTips.init();
   

2. 2. Create a custom vtype to handle the relational validation of the password:

   Ext.apply(Ext.form.VTypes, {
   password: function(val, field) {
   if (field.initialPassField) {
   var pwd = Ext.getCmp(field.initialPassField);
   return (val == pwd.getValue());
   }
   return true;
   },
   passwordText: 'What are you doing?<br/>The passwords entered do not match!'
   });
   

3. 3. Create the signup form:

   var signupForm = { xtype: 'form',
   id: 'register-form',
   labelWidth: 125,
   bodyStyle: 'padding:15px;background:transparent',
   border: false,
   url: 'signup.php',
   items: [
   { xtype: 'box',
   autoEl: { tag: 'div',
   html: '&lt...