Creating validation functions for URLs, email addresses, and other types of data

Ext JS has an extensive library of validation functions. This is how it can be used to validate URLs, email addresses, and other types of data.

The following screenshot shows email address validation in action:

This screenshot displays URL validation in action:

How to do it...

1. Initialize the QuickTips singleton:

   Ext.QuickTips.init();
   

2. Create a form with fields that accept specific data formats:

   Ext.onReady(function() {
      var commentForm = new Ext.FormPanel({
         frame: true,
         title: 'Send your comments',
         bodyStyle: 'padding:5px',
         width: 550,
         layout: 'form',
         defaults: { msgTarget: 'side' },
         items: [
           { xtype: 'textfield',
             fieldLabel: 'Name',
             name: 'name',
             anchor: '95%',
             allowBlank: false
           },
           {
             xtype: 'textfield',
             fieldLabel: 'Email',
             name: 'email',
             anchor: '95%',
             vtype: 'email'
           },
           {
             xtype: 'textfield',
             fieldLabel: 'Web page',
             name: 'webPage',
             vtype: 'url',
             anchor: '95%'
           },
           {
             xtype: 'textarea',
             fieldLabel: 'Comments',
             name: 'comments',
             anchor: '95%',
             height: 150,
             allowBlank: false
         }],
         buttons: [{
            text: 'Send'
          },
          {
            text: 'Cancel'
         }]
      });
      commentForm.render(document.body);
   });
   
   

How it works...

The vtype configuration option specifies which validation function will be applied to the field.

There's more...

Validation types in Ext JS include alphanumeric, numeric, URL, and email formats. You can extend this feature with custom validation functions, and virtually, any format can be validated. For example, the following code shows how you can add a validation type for JPG and PNG files:

Ext.apply(Ext.form.VTypes, {
   Picture: function(v) {
      return /^.*.(jpg|JPG|png|PNG)$/.test(v);
   },
   PictureText: 'Must be a JPG or PNG file';
});

If you need to replace the default error text provided by the validation type, you can do so by using the vtypeText configuration option:

{
  xtype: 'textfield',
  fieldLabel: 'Web page',
  name: 'webPage',
  vtype: 'url',
  vtypeText: 'I am afraid that you did not enter a URL',
  anchor: '95%'
}

See also...

• The Specifying the required fields in a form recipe, covered earlier in this article, explains how to make some form fields required
• The Setting the minimum and maximum length allowed for a field's value recipe, covered earlier in this article, explains how to restrict the number of characters entered in a field
• The Changing the location where validation errors are displayed recipe, covered earlier in this article, shows how to relocate a field's error icon
• Refer to the previous recipe, Deferring field validation until form submission, to know how to validate all fields at once upon form submission, instead of using the default automatic field validation
• The next recipe, Confirming passwords and validating dates using relational field validation, explains how to perform validation when the value of one field depends on the value of another field
• The Rounding up your validation strategy with server-side validation of form fields recipe (covered later in this article) explains how to perform server-side validation

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. Initialize the QuickTips singleton:

   Ext.QuickTips.init();
   

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. 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: '<div class="app-msg"><img src="img/businessman
             add.png" class="app-img" />
             Register for The Magic Forum</div>'
       }
     },
     { xtype: 'textfield', id: 'email', fieldLabel: 'Email',
       allowBlank: false, minLength: 3,
       maxLength: 64,anchor:'90%', vtype:'email'
     },
     { xtype: 'textfield', id: 'pwd', fieldLabel: 'Password',
       inputType: 'password',allowBlank: false, minLength: 6,
       maxLength: 32,anchor:'90%',
       minLengthText: 'Password must be at least 6 characters
         long.'
     },
     { xtype: 'textfield', id: 'pwd-confirm',
       fieldLabel: 'Confirm Password', inputType: 'password',
       allowBlank: false, minLength: 6,
       maxLength: 32,anchor:'90%',
       minLengthText: 'Password must be at least 6 characters
         long.',
       vtype: 'password', initialPassField: 'pwd'
     }
   ],
   buttons: [{
     text: 'Register',
     handler: function() {
       Ext.getCmp('register-form').getForm().submit();
     }
   },
   {
     text: 'Cancel',
     handler: function() {
     win.hide();
     }
     }]
   }
   
   

4. Create the window that will host the signup form:

   Ext.onReady(function() {
     win = new Ext.Window({
       layout: 'form',
       width: 340,
       autoHeight: true,
       closeAction: 'hide',
       items: [signupForm]
     });
     win.show();