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…
- The first thing is to initialize the QuickTips singleton:
Ext.QuickTips.init(); - 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();
}
}] }
- 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 chapter) 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 chapter) 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
Changing the location where validation errors are displayed
A popular way to display validation errors is to place an error icon to the side of the invalid
fields As shown in the next screenshot, this recipe uses a login form to explain how to
implement this technique.
How to do it…
- Initialize the QuickTips singleton:
Ext.QuickTips.init(); - 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’
},
{ 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’
}
],
buttons: [{
text: ‘Login’,
handler: function() {
Ext.getCmp(‘login-form’).getForm().submit();
}
},
{ text: ‘Cancel’,
handler: function() {
win.hide();
}
}] }
- 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…
First, initializing the QuickTips singleton allows the form’s validation errors to be shown as tool
tips.
Next, the form is built. To display error icons at the righthand side of the invalid fields, the
msgTarget option is set to side:
{ xtype: ‘textfield’, id: ‘login-user’, fieldLabel: ‘Username’,
allowBlank: false, minLength: 3, maxLength: 32,
msgTarget:’side’
},
{ 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’
}
The last step consists of creating and displaying the window that hosts the form.
There’s more…
The value of the msgTarget configuration option defaults to qtip, which displays a quick
tip when the user hovers over the field. Besides side, used in this recipe, you can use these
remaining values to change how the validation error displays:
- title: Displays a default browser title attribute pop up.
- under: Adds a block div beneath the field containing the error text.
- [element id]: Adds the error text directly to the innerHTML of
the specified element.
See also…
- The Specifying the required fields in a form recipe, covered previously in this chapter,
explains how to make some form fields required - The previous recipe, 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 following recipe, Deferring field validation until form submission, explains 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 chapter, 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
Pentaho Reporting 3.5 for Java Developers