Home arrow Design Usability arrow Page 11 - Using HTML_QuickForm To Manage Web Forms, Part 1

Using HTML_QuickForm To Manage Web Forms, Part 1

Tired of authoring dull and dreary Web forms everyday? Fed up of programming JavaScript validations day-in and day-out? Then, the HTML_QuickForm package is just the solution for which you are looking. In the first part of this two-part tutorial, I'll get you started with the basics of building Web forms using this resourceful PEAR package.

Author Info:
By: Harish Kamath
Rating: 5 stars5 stars5 stars5 stars5 stars / 73
December 22, 2004
  1. · Using HTML_QuickForm To Manage Web Forms, Part 1
  2. · Installing The HTML_QuickForm Package
  3. · My First HTML_QuickForm
  4. · FORM Elements
  5. · Adding Standard HMTL FORM Elements
  6. · Defining FORM Controls, Submitting Data
  7. · Grouping
  8. · "Checkbox" and "Radio" Elements
  9. · Drop Down Control and Hidden Element
  10. · Implementing Form Validations
  11. · Password Field Validation
  12. · Processing Data With HTML_QuickForm
  13. · Conclusion

print this article

Using HTML_QuickForm To Manage Web Forms, Part 1 - Password Field Validation
(Page 11 of 13 )

Note that I have added some text field to my Web form to demonstrate another common validation requirement - the comparison of text entered in two "password" fields.


// snip

$obj_registration_form->addElement('text', 'txtUsername', 'Username:', array( 'size' => 40, 'maxlength' => 15));

$obj_registration_form->addElement('password', 'txtPassword1', 'Password:', array( 'size' => 40, 'maxlength' => 15));

$obj_registration_form->addElement('password', 'txtPassword2', 'Re-enter Password:', array( 'size' => 40, 'maxlength' => 15));

// snip

$obj_registration_form->addRule('txtPassword1', 'Please enter your "Password" as it is a required field.', 'required');

$obj_registration_form->addRule(array('txtPassword1', 'txtPassword2'), 'The two passwords do not match. Please re-enter your password correctly.', 'compare');

$obj_registration_form->addRule('txtPassword1', 'Please enter a valid "Password" containing between 8 and 10 consisting of alphabets and numbers only.', 'regex', '/^[a-zA-Z0-9]{8,10}$/');

// snip


Here, I have added three new text fields: one for the user to enter his/ her username and two password fields to ensure that the user enters the password correctly. This is a common feature for most Web forms.

Next, I would like to highlight the "compare" keyword. This new rule allows me to compare the values entered into any two text fields. All I need to do is pass the names of the two controls to the addRule() method.

Here is the error message displayed on the screen if the user enters two different values in the "Password" and "Confirm Password" fields.

Using HTML_QuickForm

The above example has implemented server-side validation for all the fields of the Web form. However, it is also possible to implement client-side with a little modification to the above example:

Code Listing 4

Load this example in your browser and click the "Register" button with filling any form field. The browser will immediately throw a JavaScript alert as seen below:

Using HTML_QuickForm

This client-side validation is, courtesy of, a simple update to each validation rule defined in our earlier script:


// snip

// validation rules come here
$obj_registration_form->addRule('txtAddress', 'Please enter your "Address" as it is a required field.', 'required', null, 'client');
$obj_registration_form->addRule('txtAddress', 'Please enter at least 20 characters in the "Address" field.', 'minlength', 20, 'client');
$obj_registration_form->addRule('txtAddress', 'Please enter at most 255 characters in the "Address" field.', 'maxlength', 255, 'client');

// snip


The fifth parameter of the addRule() method is used to specify the location where I wish to check the validations. This parameter takes two values: the first is "server" -  the default value - and the second is "client."

A little point to keep in mind: server-side is always performed. This ensures that validations are still implemented if a user has turned off JavaScript in his/her browser.

So far, this class has met my requirements as defined at the beginning of this article. Now, all that remains to be seen is how to store the data submitted by the user into a database, which is the final step for most Web form applications.

blog comments powered by Disqus

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials