Ever since I started building websites I’ve found making forms to be time consuming, tedious and generally boring, and I’m pretty sure most web developers are in a similar situation.
First of all you have your HTML form, which then submits all the data to PHP to be validated etc. You have to write the validation rules for each form field in PHP, and then come up with a system of reporting errors back to the user. With large forms this can get extremely complicated!
Around two years ago I came across a form validator by Simon Willison. This basically let you write the entire form and it’s validation rules in the html. These rules are then read by PHP, applied to the relevant form fields and so on. It’s a very elegant solution that makes building forms much easier and faster, as well as easier to debug and maintain. I’ve been using this script for the last 2 years and have made various changes to the script along the way to suit my purposes.
However, the script does have it’s down-points. It uses the PHP 4 XML library which to be honest is rubbish! It causes the code to become extremely bloated and unable to handle certain characters such as ampersands (&). This means that as soon as a user enters an ampersand or a character like a dollar, the script would crash!
The script also only supported textfields, and didn’t provide support for radio buttons, checkboxes and select drop-down lists.
With all these positives and negatives in mind I’ve built my own PHP Form Processor from scratch, which I think does the job quite nicely. The script is open source and I’ve provided a tutorial and several example forms on how to use it.
The script also protects your forms against CSRF (Cross-site request forgery) and form manipulation. Anyway, without futher ado, here is the tutorial..
Requirements
- PHP 5 with SimpleXML support
- Session support
- Cheese on toast
Demonstration
Traditionally an XHTML form input box would look like this:
<input type="text" id="myBox" name="myBox" />
Using the PHP form processor this would be written as:
<element id="myBox"> <input type="text" /> <error> <strong class="error">!</strong></error> <compulsory message="myBox must be filled in" /> <validate test="alpha" message="myBox must only be letters" /> </element>
At first glance it looks a lot more bloated than the traditional method, so lets take a look at what it’s doing and why it’s better.
When using the form processor all the form items are wrapped in element tags. The element tag tells the form processor that it’s a form field, and also specifies the ID. Within the element tag we define the properties and rules of the form field. In the above example we’re telling the form processor that the form field we want is a text field (<input type=”text” />), as well as defining various rules to apply to the user’s input.
The line ’<error> <strong class=”error”>!</strong></error>’ defines what is displayed when a validation rule fails. In this case a bold exclamation mark would be displayed just after the text field.
The next few lines are the rules which we want to apply to the text field. The compulsory line states that the field must be filled in, and if it’s not present the message ‘myBox must be filled in’ to the user. The validate line states that the user input must only be letters, and if it’s not present the message ‘myBox must only be letters’ to the user.
Many rules can be applied to the form fields. They will be applied to the form field in the order that you define them (top to bottom). For example, if there are 3 rules defined for a form field and the first rule fails then the next 2 rules won’t be applied. Instead the error message for rule 1 will be shown to the user. If the 1st rule runs fine it’ll move onto the 2nd rule etc.
Here is a description of each of the rules available:
Compulsory
Checks whether the user has entered any input or not.
<compulsory message="This field is compulsory" />
| Textfield | Password | Textarea | Dropdown list | Checkbox | Radio button | Button |
| Yes | Yes | Yes | No | No | No | No |
Validate
Checks whether the user input matches the format specified. The format can be alpha, alphanumeric or numeric.
<validate test="alpha" message="email must be alpha" />
| Textfield | Password | Textarea | Dropdown list | Checkbox | Radio button | Button |
| Yes | Yes | Yes | No | No | No | No |
Regular Expression
Checks whether the user input matches the regular expression specified.
<regexp test="|^[a-zA-Z]*$|" message="email doesn't match the regexp" />
| Textfield | Password | Textarea | Dropdown list | Checkbox | Radio button | Button |
| Yes | Yes | Yes | No | No | No | No |
Text transform
Alters how the user input is outputted.
<text transform="upper" /> UPPERCASES THE ENTIRE INPUT <text transform="lower" /> lowercases the entire input <text transform="ucwords" /> Uppercases The First Letter Of Each Word
| Textfield | Password | Textarea | Dropdown list | Checkbox | Radio button | Button |
| Yes | Yes | Yes | No | No | No | No |
Minimum length
Checks whether the user input is of a required length.
<minLength length="4" message="This field must contain more than 3 characters" />
| Textfield | Password | Textarea | Dropdown list | Checkbox | Radio button | Button |
| Yes | Yes | Yes | No | No | No | No |
Maximum length
Checks whether the user input is greater than a required length.
<maxLength length="10" message="This field must contain less than 10 characters" />
| Textfield | Password | Textarea | Dropdown list | Checkbox | Radio button | Button |
| Yes | Yes | Yes | No | No | No | No |
Match
Checks whether the user input matches the user input in another field. Most common usage is for confirming passwords.
<match element="anotherFieldID" message="this field must match another field" />
| Textfield | Password | Textarea | Dropdown list | Checkbox | Radio button | Button |
| Yes | Yes | Yes | No | No | No | No |
Callback
Takes the user input and passes it to a PHP function of your choice. The function should take one parameter as a string (the user input), and return Boolean true or false. If the function returns false the error message will be presented to the user.
An unlimited number of callbacks can be defined for each form field – just place them one after another. Each callback will be run in order.. if the first one is ok then it moves onto the next one. However, if the first one fails it won’t run the other callbacks or rules.
<callback function="functionname" message="callback 1 failed" />
| Textfield | Password | Textarea | Dropdown list | Checkbox | Radio button | Button |
| Yes | Yes | Yes | Yes | Yes | Yes | Yes |
Summary & goodies!
The entire form and it’s rules are read in by PHP, which then goes through the form and extracts the rules. It then cleans up the form and produces strict XHTML which it outputs to the user. This means they never see the rules and just see standard XHTML markup.
It’s a difficult concept and you might be a bit confused at this point, so it’s probably best just to give you a working example. Here is a simple form which tests some of the functionality available (complete with source-code).
View example forms
Download the form processor (with examples) (version 2.01 – 24/01/2009)
As always I’d love to hear from you, so any thoughts, comments, bugs etc, please post! I’d also like to see examples of where people have used it, so feel free to drop me links!
June 10, 2008 at 7:04 am
Hey Rich,
Having used the old version of your form class, This is a great improvement.
It truly does save hours of development time and the fact you are releasing it free is even better.
Thanks
Gavin!
August 21, 2008 at 9:20 am
Hi
I downloaded the from processor but I think I don’t have the session thing that is required…what is this? I run it from xampp on localhost. I can see example.php when I run from localhost but not formprocessor.php
Can you tell me what I”m doing wrong.
thanx for this free code!
August 21, 2008 at 9:43 am
Hi Franco,
All you need to do is download the form processor (from the link above) and extract the contents of the zip file into your website directory. There should be a few files – formprocessor.php and /examples. Any of the files in /examples are the ones you’d want to run through xampp.
I’m unsure of your problem with the sessions – the scripts don’t require anything special aside from normal sessions (I believe xampp has this functionality enabled by default). Could you show me any error messages you are receiving so I can help you further?
January 28, 2009 at 3:49 pm
No no no…
“There should be 2 files – testform.php and formprocessor.php.”
There are a lot of files. but none with these names. And a directory with Macintosh Trash (__MACOSX).
There are in the directory “formprocessor”:
formprocessor\examples
formprocessor\class.formprocessor.php
formprocessor\.DS_Store (another Mac file)
formprocessor\examples\usingConfig.php
formprocessor\examples\register.php
formprocessor\examples\password.php
formprocessor\examples\_notes
formprocessor\examples\_notes\dwsync.xml (Mac file?!)
Or do you mean another link?!
September 29, 2008 at 2:33 am
I’m trying but I get this error:
Parse error: syntax error, unexpected ‘(‘, expecting ‘,’ or ‘)’ in /home/ollin/domains/ollinpublicidad.com/public_html/proyectos/tecmei/formprocessor.php on line 53
September 29, 2008 at 8:38 pm
I’ve just released version 1.03 of the form processor. This releases fixes a few bugs and adds some further functionality which will be documented shortly.
Juan, this should also fix your problem.
October 12, 2008 at 12:33 pm
Hi
This looks just what I’m after and thank you for making it available for free….I have just downloaded it and I am getting the same error as Juan – Parse error: syntax error, unexpected ‘(‘, expecting ‘,’ or ‘)’ on line 53 again…..have you any ideas?
Thanks a lot
January 1, 2009 at 3:33 pm
You need to make sure you have PHP 5 and simplexml, otherwise you will receive that error.
October 14, 2008 at 8:20 pm
Where can we download the latest version?
January 1, 2009 at 3:33 pm
The link to download is at the bottom of the article in the summary section (sorry if it’s not clear!).
November 26, 2008 at 12:27 am
Richard,
Starting to use your Form Processor. However don’t appear to get the callbacks to work on the radio buttons. Don’t appear to work in the in the testform.
Any help would be appreciated
THANKS – Andrew
November 26, 2008 at 8:54 am
Hi Andrew,
Well spotted! I’ve just updated the form processor to version 1.05 fix the bug.. please download it from the link in the article above..
December 20, 2008 at 1:11 pm
Hello Richard,
Thanks for the great plugin.
I wonder if there’s any way to pass some aditional parameters to the callback function in the xml declaration. Like, for example:
Any responce would be appreciated.
December 20, 2008 at 1:14 pm
my code is not shown
try to do it without markup. callback function is equal to length(val,max,min) just to check the length of the field.
January 1, 2009 at 3:36 pm
I’ve added the requested functionality to the form processor. Please download the update (version 2).
February 16, 2009 at 12:45 am
Hi Richard,
I’ve recently transitioned my forms from Simon’s class to yours, and I have to say I’m impressed.
I’m having trouble though with assigning predetermined values to text/password input fields, it worked before the transition. I’ve tried going through the code to see if I can fix it, however, no luck. I would really appreciate help on this
Thanks
February 16, 2009 at 9:18 am
Hi Adam,
I’m glad you’re enjoying using the form processor – I hope it’s making your life easier! The password fields were never designed to remember your input (for obvious reasons). What i’ll do is add an attribute so you can toggle this functionality on and off….
<input type="password" remember="no"...The code for the current form processor is quite messy and hard to maintain.. it was just something I hammered out in a day as a proof of concept. Over the new year I rewrote the entire class from scratch but have yet to iron out a few bugs. Once this is done I’ll add the requested functionality.
April 15, 2009 at 8:26 am
Hey Richard, thanks for the form processor. Viewing the demonstration above, it seems a good thing. But I’m new to PHP and I don’t know how to use this? Where may I create the forms?
April 15, 2009 at 8:54 am
Hi Manzoor,
The easiest way to learn about the form processor is to download the examples – http://www.richardwillars.com/demos/fp/formprocessor.zip
In that zip file are examples which should give you a good indication of how to create your own forms..
It might also be worth taking a look at http://www.gavin-holt.com/articles/tutorial-series-contact-form-part-1/ as that shows how to build a form step by step.
May 21, 2009 at 10:09 am
Hi Richard,
I was trying to send you an email with some suggestions on your form processor and demonstration of its use to me, just wonder, if you’ve got it.
February 8, 2009 at 9:17 am
Whoops! The file names changed when I released version 2 with the examples. Instead of testform.php just use any of the files in /examples. I’ll update the article to suit!