Confirming passwords and validating dates using relational field validation
Frequently, you face scenarios where the values of two fields need to match, or the value of
one field depends on the value of another field.
Let’s examine how to build a registration form that requires the user to confirm his or her
password when signing up.
How to do it…
- Initialize the QuickTips singleton:
Ext.QuickTips.init(); - Create a custom vtype to handle the relational validation of the password:
Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: ‘What are you doing?<br/>The passwords entered
do not match!’
});
- Create the signup form:
var signupForm = { xtype: ‘form’,
id: ‘register-form’,
labelWidth: 125,
bodyStyle: ‘padding:15px;background:transparent’,
border: false,
url: ‘signup.php’,
items: [
{ xtype: ‘box’,
autoEl: { tag: ‘div’,
html: ‘<div class=”app-msg”><img src=”img/businessmanadd.
png” class=”app-img” />
Register for The Magic Forum</div>’
}
},
{ xtype: ‘textfield’, id: ’email’, fieldLabel: ‘Email’,
allowBlank: false, minLength: 3,
maxLength: 64,anchor:’90%’, vtype:’email’
},
{ xtype: ‘textfield’, id: ‘pwd’, fieldLabel: ‘Password’,
inputType: ‘password’,allowBlank: false, minLength: 6,
maxLength: 32,anchor:’90%’,
minLengthText: ‘Password must be at least 6 characters
long.’
},
{ xtype: ‘textfield’, id: ‘pwd-confirm’,
fieldLabel: ‘Confirm Password’, inputType: ‘password’,
allowBlank: false, minLength: 6,
maxLength: 32,anchor:’90%’,
minLengthText: ‘Password must be at least 6 characters
long.’,
vtype: ‘password’, initialPassField: ‘pwd’
}
],
buttons: [{
text: ‘Register’,
handler: function() {
Ext.getCmp(‘register-form’).getForm().submit();
}
},
{
text: ‘Cancel’,
handler: function() {
win.hide();
}
}] }
- Create the window that will host the signup form:
Ext.onReady(function() {
win = new Ext.Window({
layout: ‘form’,
width: 340,
autoHeight: true,
closeAction: ‘hide’,
items: [signupForm] });
win.show();
How it works…
The first step is to initialize the QuickTips singleton. This allows the form’s validation errors
to show as tool tips.
Next, a custom vtype is created to support the relational validation
of the password. A vtype consists of a validation function and the text to use when there
is a validation error. The password validation function compares the values of the two
password fields:
password: function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
}
When the validation fails, the error text is used:
passwordText: ‘What are you doing?
The passwords entered do
not match!’
What follows is the creation and display of the signup form. Notice how the second password
field has references to the custom vtype and the first password field. This allows the
validation function in the custom vtype to work:
{ xtype: ‘textfield’, id: ‘pwd-confirm’,
fieldLabel: ‘Confirm Password’, inputType: ‘password’,
allowBlank: false, minLength: 6, maxLength: 32,anchor:’90%’,
minLengthText: ‘Password must be at least 6 characters long.’,
vtype: ‘password’, initialPassField: ‘pwd’
}
There’s more…
You can also use this technique for validating date fields that act as a date range, where
selecting an initial date in one field sets the minimum or maximum value for the other field.
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 Deferring field validation until form submission recipe, covered earlier in
this chapter, to know how to validate all fields at once upon form submission, instead
of using the default automatic field validation. - Refer to the previous 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 following recipe, Rounding up your validation strategy with server-side validation
of form fields, explains how to perform server-side validation.
Rounding up your validation strategy with server-side validation of form fields
Server-side validation should be an important component of your validation strategy for any
application. This recipe explains how to send validation codes and messages to a login form
from the server-side code.
The login form built in this recipe performs client-side validation. Upon submission, the server
returns an error code and a message, as shown in the next screenshot:
How to do it…
- Initialize the QuickTips singleton so that we can have error messages as tool tips:
Ext.QuickTips.init();
- Define 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({waitMsg: ‘Please wait…’ });
}
},
{
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();
- Create the login.php server page:
<?php
echo “{success:false,errors:[{id:’login-pwd’,msg:’Sorry, you have
to type the magic word!’}]}”;
?>
How it works…
The first step is to initialize the QuickTips singleton, so that we can show the form’s
validation errors as tool tips.
Next, the form and the window that serves as a host for the form are built. The form is set up
to perform client-side validation as explained in the previous recipes in this chapter.
The interesting part of this recipe is the server page that handles the form submission.
The PHP code here illustrates which elements are necessary to notify the form that one
or more fields are invalid:
echo “{success:false,errors:[{id:’login-pwd’,msg:’Sorry, you have to
type the magic word!’}]}”;
The server page returns the JSON representation of an object with two properties—success
and errors. The success property is present both when there are problems with the
validation (success = false), or when the submission was successful (success = true).
Errors is an array containing one object for each invalid field. This object in turn contains the
ID of the invalid field and the error message:
{id:’login-pwd’,msg:’Sorry, you have to type the magic word!’}
There’s more…
A comprehensive validation strategy is always recommended. Even though the client-side
validation facilities in Ext JS are very powerful, do not skip server-side validation. Use it to add
robustness and resiliency to your applications.
See also…
- The Specifying required fields in a form recipe, covered earlier in this chapter,
explains how to make some form fields required. - Refer to the Deferring field validation until form submission recipe, covered earlier
in this chapter, to know how to validate all fields at once upon form submission,
instead of using the default automatic field validation.
Pentaho Reporting 3.5 for Java Developers