docs/guides/forms/examples/validation/app.js

   1 /**
   2  * @example Form Validation
   3  *
   4  */
   5 Ext.require('Ext.form.Panel');
   6 Ext.require('Ext.form.field.Date');
   7 Ext.onReady(function() {
   8
   9     var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
  10     Ext.apply(Ext.form.field.VTypes, {
  11         //  vtype validation function
  12         time: function(val, field) {
  13             return timeTest.test(val);
  14         },
  15         // vtype Text property: The error text to display when the validation function returns false
  16         timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
  17         // vtype Mask property: The keystroke filter mask
  18         timeMask: /[\d\s:amp]/i
  19     });
  20
  21     Ext.create('Ext.form.Panel', {
  22         renderTo: Ext.getBody(),
  23         title: 'User Form',
  24         height: 200,
  25         width: 280,
  26         bodyPadding: 10,
  27         defaultType: 'textfield',
  28         items: [
  29             {
  30                 fieldLabel: 'First Name',
  31                 name: 'firstName'
  32             },
  33             {
  34                 fieldLabel: 'Last Name',
  35                 name: 'lastName'
  36             },
  37             {
  38                 fieldLabel: 'Email Address',
  39                 name: 'email',
  40                 vtype: 'email'
  41             },
  42             {
  43                 xtype: 'datefield',
  44                 fieldLabel: 'Date of Birth',
  45                 name: 'birthDate',
  46                 msgTarget: 'under', // location of the error message
  47                 invalidText: '"{0}" bad. "{1}" good.' // custom error message
  48             },
  49             {
  50                 fieldLabel: 'Last Login Time',
  51                 name: 'loginTime',
  52                 vtype: 'time' //  using a custom validation type
  53             }
  54         ]
  55     });
  56
  57 });