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. 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,
   
   				msgTarget:’side’,validationEvent:false
   
   			},
   
   			{ xtype: ‘textfield’, id: ‘login-pwd’,
   
   				fieldLabel: ‘Password’, inputType: ‘password’,
   
   				allowBlank: false, minLength: 6, maxLength: 32,
   
   				minLengthText: ‘Password must be at least 6 characters
   
   				long.’,
   
   				msgTarget:’side’,validationEvent: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…

The first step consists of initializing the QuickTips singleton so that the form’s validation
errors can be shown as tool tips.

Next, the form is built. In order to disable automatic validation, the validationEvent
configuration option is set to false:

	{ xtype: ‘textfield’, id: ‘login-user’, fieldLabel: ‘Username’,

		allowBlank: false, minLength: 3, maxLength: 32,

		msgTarget:’side’,validationEvent:false

	},

	{ xtype: ‘textfield’, id: ‘login-pwd’, fieldLabel: ‘Password’,

		inputType: ‘password’,allowBlank: false,

		minLength: 6, maxLength: 32,

		minLengthText: ‘Password must be at least 6 characters

		long.’,

		msgTarget:’side’,validationEvent:false

	}

The validationEvent option indicates the event that should initiate field validation. The
default value for this option is keyup. Like in the code above, when set to false, it simply
disables automatic validation for the field.

The last step consists of creating and displaying the window that hosts the form.

There’s more…

This recipe is a good solution in some data-intensive applications, where validating a field with
every keystroke or focus change might become an annoyance for the user.

When you want to disable client-side field validation altogether and place on the server
all of the responsibility for the validation, you can add the clientValidation = false
configuration option to the submit() function call:

	Ext.getCmp(‘login-form’).getForm().submit({clientValidation:false});

See also…

• The Specifying the required fields in a form recipe, covered earlier in this chapter,
  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 chapter, explains how to restrict the number of characters
  entered in a field


• The previous recipe, Changing the location where validation errors are displayed,
  shows how to relocate a field’s error icon


• Refer to the next recipe, Creating validation functions for URLs, email addresses, and
  other types of data, 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 chapter, 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 chapter, explains how to perform server-side validation

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 chapter,
  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 chapter, 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 chapter, 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 chapter) explains how to perform server-side validation.