Deferring field validation until form submission

Generally, a form field is validated on the client-side when the keyup event occurs, or when the field loses focus. Occasionally, you might prefer the validation to be performed just before the form is submitted.

In this recipe, a login form is built, with the validation deferred until the form is submitted. Focus changes or the keyup event will not trigger field validation, as shown in the following screenshot:

As shown in the next screenshot, submitting the form will trigger the validation:

How to do it...

1. 1. 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...