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:
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.
Next: Password Field Validation >>
More Design Usability Articles
More By Harish Kamath
