Home arrow Design Usability arrow Page 10 - Using HTML_QuickForm To Manage Web Forms, Part 1
DESIGN USABILITY

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Using HTML_QuickForm To Manage Web Forms, Part 1 - Implementing Form Validations
(Page 10 of 13 )

So far, I have already demonstrated how to render different <FORM> elements using the HTML_QuickForm() object. Next, I shall show you how to validate the data entered by the user in a Web form using the same object.

Take a look at the updated code listing below:

Code Listing 3

Load the Web form in the browser and hit the "Register" without filling any values in the Web form. The PHP script spits back a screen full of error messages -  just like the one shown below:

Using HTML_QuickForm

Impressed? You will be when I show you how easy it is to implement these validations using HTML_QuickForm(). Before I dissect the code, a little background on how the HTML_QuickForm package implements such behavior.

Consider a validation whereby the user must enter a value for a particular form field. The HTML_QuickForm package considers each of these validations as a "rule" and comes with a pre-defined list of keywords - much like the keywords associated with the <FORM> elements for the addElement() method - one for each "rule" that is implemented by the package.

The following code snippet should make things clearer:

<?php

// snip

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

$obj_registration_form->addRule('txtAddress', 'Please enter at least 20 characters in the "Address" field.', 'minlength', 20);

$obj_registration_form->addRule('txtAddress', 'Please enter at most 255 characters in the "Address" field.', 'maxlength', 255);

// snip

?>

Consider the addRule() method (which I will talk about in just a moment) used in the above code snippet. I have passed three parameters to this method. The first represents that name of the Web form control to validate, the second is the error message to be displayed if the validation fails, and the third is the keyword associated with the "rule" that I wish to implement.

Let us assume that I want to make the "txtAddress" field compulsory. The corresponding keyword for such a "rule" is aptly titled "required."

The next two statements implement two other pre-defined rules: "minlength" and "maxlength." The former rule specifies the minimum number of characters that should be entered in the text field and the latter indicates the maximum limit for the same field. Note that you have to specify the actual values for the two rules in the fourth parameter of the addRules() method, as seen above.

<?php

// snip

$obj_registration_form->addGroupRule('txtFullName', array ( 'txtFirstName' => array(array('Please enter your "First Name" as it is a required field', 'required')), 'txtLastName' => array(array('Please enter your "Last Name" as it is a required field', 'required'))), 'required');

$obj_registration_form->addGroupRule('txtFullName', 'Please enter only letters in your "Full Name"', 'lettersonly', 2);

// snip

?>

I have already explained that we can "group" similar element with the HTML_QuickForm() object and it is no different when it comes to applying rules to such "groups." In other words, I can apply a rule to each individual member of a "group" using a single call to the addGroupRule() method. Note that I have to define an array, containing the error message as well as the "rule" keyword, for each element that forms a part of the "group."

Common Error Messages

Alternatively, it is much easier to display a common error message if the validation fails for any one element of the "group." Take a look at the second statement above. I have specified a single error message that is displayed if any one or more of the elements of the group fails the validation. Here, I have used the "lettersonly" rule, which ensures the user can enter only letters from the alphabet in the text field. The last parameter of the addGroupRule() represents the minimum number of element of the "group" that should satisfy the validation. I have set this value to "2" i.e. both fields of my "group" control should pass the validation test.

Validating <FORM> elements such as drop down and radio button is simple and straightforward as seen from the following code snippet:

<?php

// snip

$obj_registration_form->addRule('ddlCountry', 'Please select a "Country" as it is a required field.', 'required');

$obj_registration_form->addRule('txtEmailAddress', 'Please enter your "e-mail Address" as it is a required field.', 'required');

$obj_registration_form->addRule('txtEmailAddress', 'Please enter a valid "e-mail Address".', 'e-mail');

$obj_registration_form->addGroupRule('radGender', 'Please select your "Gender" as it is a required field.', 'required');

// snip
?>

However, I would like to highlight the use of the "email" rule above - the HTML_QuickForm() object comes with a pre-defined functionality to validate the email address submitted in a Web form.

More Validation Rules 

<?php

// snip

$obj_registration_form->addRule('txtGroupName', 'Please enter between 5 and 20 characters for your "Group Name".', 'rangelength', array(5,20));

$obj_registration_form->addRule('txtGroupName', 'Please do enter any punctuation characters in your "Group Name".', 'nopunctuation');

$obj_registration_form->addRule('txtGroupName', 'Please note that you can enter only  alphabets, numbers and apostrophes for your "Group Name".', 'regex', '/^[a-zA-Z0-9\' ]{6,20}$/');

// snip

?>

The above code snippet demonstrates some more validation rules. The "rangelength" keyword allows us to specify range of length for the string entered in the text field. Here you can pass the minimum and maximum length as elements of an array.

The "nopunctuation" keyword implements a rule that does not allow the user to enter any special characters such as "?", "!", "." etc. in the text field.

Finally, the "regex" rule that allows me leverage on the power of regular expressions (a.k.a. "regex") to validate the text entered in the Web form. If the string does not return a positive match when compared against the "regex" expression, the validation fails.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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