Specifying the required fields in a form

This recipe uses a login form as an example to explain how to create required fields in a form.

How to do it...

1. Initialize the global QuickTips instance:
   

   Ext.QuickTips.init();
   

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
      },
      { xtype: 'textfield',
        id: 'login-pwd',
        fieldLabel: 'Password',
        inputType: 'password',allowBlank: false
      }],
      buttons: [{
         text: 'Login',
         handler: function() {
            Ext.getCmp('login-form').getForm().submit();
         }
       },
       {
          text: 'Cancel',
          handler: function() {
             win.hide();
          }
      }]
   }
   
   
   

3. Create the window that will host the login form:

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

How it works...

Initializing the QuickTips singleton allows the form's validation errors to be shown as tool tips. When the form is created, each required field needs to have the allowblank configuration option set to false:

{ xtype: 'textfield', id: 'login-user', fieldLabel: 'Username', 
allowBlank: false
},
{ xtype: 'textfield', id: 'login-pwd', fieldLabel: 'Password', 
inputType: 'password', allowBlank: false
}

Setting allowBlank to false activates a validation rule that requires the length of the field's value to be greater than zero.

There's more...

Use the blankText configuration option to change the error text when the blank validation fails. For example, the username field definition in the previous code snippet can be changed as shown here:

{ xtype: 'textfield', id: 'login-user', fieldLabel: 'Username',
    allowBlank: false, blankText:'Enter your username'
}

The resulting error is shown in the following figure:

Validation rules can be combined and even customized. Other recipes in this article explain how to range-check a field's length, as well as how to specify the valid format of the field's value.

See also...

• The next recipe titled Setting the minimum and maximum length allowed for a field's value explains how to restrict the number of characters entered in a field
• The Changing the location where validation errors are displayed recipe, covered later in this article, shows how to relocate a field's error icon
• Refer to the Deferring field validation until form submission recipe, covered later in this article, to learn how to validate all fields at once upon form submission, instead of using the default automatic field validation
• The Creating validation functions for URLs, email addresses, and other types of data recipe, covered later in this article, explains the validation functions available in Ext JS
• The Confirming passwords and validating dates using relational field validation recipe, covered later in this article, 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

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. The first thing is to initialize the QuickTips singleton:

   Ext.QuickTips.init();
   

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',
           allowBlank: false,minLength: 6,maxLength: 32,
           minLengthText: 'Password must be at least 6 characters
             long.'
         }
      ],
      buttons: [{
         text: 'Login',
         handler: function() {
            Ext.getCmp('login-form').getForm().submit();
         }
       },
       {
         text: 'Cancel',
         handler: function() {
            win.hide();
         }
       }]
   }
   
   

3. Create the window that will host the login form:

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

How it works...

After initializing the QuickTips singleton, which allows the form's validation errors to be shown as tool tips, the form is built.

The form is an instance of Ext.form.FormPanel. The username and password fields have their lengths restricted by the way of the minLength and maxLength configuration options:

{ xtype: 'textfield', id: 'login-user', fieldLabel: 'Username',
allowBlank: false, minLength: 3, maxLength: 32
},
{ xtype: 'textfield', id: 'login-pwd',
fieldLabel: 'Password', inputType: 'password',
allowBlank: false, minLength: 6, maxLength: 32,
minLengthText: 'Password must be at least 6 characters long.'
}

Notice how the minLengthText option is used to customize the error message that is displayed when the minimum length validation fails:

{ xtype: 'textfield', id: 'login-pwd',
  fieldLabel: 'Password', inputType: 'password',
  allowBlank: false, minLength: 6, maxLength: 32,
  minLengthText: 'Password must be at least 6 characters long.'
}

As a last step, the window that will host the form is created and displayed.

There's more...

You can also use the maxLengthText configuration option to specify the error message when the maximum length validation fails.

See also...

• The previous recipe, Specifying the required fields in a form, explains how to make some form fields required
• The next recipe, Changing the location where validation errors are displayed, shows how to relocate a field's error icon
• Refer to the Deferring field validation until form submission recipe (covered later in this article) to learn how to validate all fields at once upon form submission, instead of using the default automatic field validation
• Refer to the Creating validation functions for URLs, email addresses, and other types of data recipe (covered later in this article) for an explanation of the validation functions available in Ext JS
• The Confirming passwords and validating dates using relational field validation recipe (covered later in this article) 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