Samuel Sjöberg's weblog

Skip to navigation

vForm - Form Validation 2.0

It is time for a second try on automated form validation on both the client and server. This time I am taking a new stance, but still with the same goal: form validation on client and server with the rules defined one time, in one place.

- Hi XML, old friend! Say, have you met XmlHttpRequest? If you two hook up together we could accomplish great things...

Well, XML and XmlHttpRequest hit of well and kind of got married. Most modern web browsers generate XmlHttpRequest.responseXML for you as a result of this. We could use this to make vForm 2.0!

Shortcomings of vForm 1.0

The basic idea of vform 1.0 was to pass the rules and error messages with the form. This was accomplished by concatenating rules and callback requests to the name of the field. This approach has a couple of cons:

Another drawback with this approach was its implementation. The implementation was a bit hard to follow and did not cope with dynamic forms added with AJAX. Callback routines could only be added in global scope and optional fields could not be validated at all if they were empty.

Introducing vForm 2.0

vForm 2.0 is designed to be more flexible, more robust and easier to maintain compared to its ancestor. While vForm 1.0 was based on the Singleton pattern, vform 2.0 is a class that must be instantiated. vForm 2.0 depends on the Prototype framework and delegates AJAX calls and event handling to the library.

The basic idea of vForm 2.0 is to get the validation rules from an XML file. The XML file can then be used both by the client and the server scripts. The benefit from using an XML file for the rules is that they cannot be bypassed on the way to the server script anymore. The need to validate the vForm rules before validating is eliminated.

How to use vForm 2.0

Let's assume we have the following simple HTML form:

<form name="myform" method="post" action="index.php">
   <label for="post_surname">
      Enter your surname:<br />
      <input type="text" name="surname" />
   </label>
</form>

First step is to define the vForm rules in an XML file. Let us call it rules.xml. We want our surname to only contains alphabetical characters and be mandatory.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE vform PUBLIC "VFORM 2.0 DTD"
      "http://samuelsjoberg.com/vform.dtd">
<vform name="myform">
   <field name="surname">
      <rules>
         <rule name="alpha"/>
      </rules>
      <message>Surname can only contain
            alphabetical characters.</message>
   </field>
</vform>

Note that the XML should conform to the vform.dtd. However, no validation against the DTD is performed by vForm. See the DTD or the project page for more information about the XML syntax.

To enable vForm on the client (i.e. javascript), add the following snippet at the end of your body tag.

<script type="text/javascript">
//<![CDATA[
var vform = new vForm('./rules.xml');
//]]>

The procedure on the server is similar to the one for vForm 1.0.

require_once('vform.class.php');
$vform = new vForm('./rules.xml');
if (!$vform->isValid($_POST)) {
   $error_message = $vform->getHtmlErrors();
} else {
   // Write to persistence layer
}

Find out more

For more technical information on vForm 2.0, class diagrams and a description of the bundled, pre-defined validation rules, visit the project page for vForm 2.0.

I have set up a demonstration page if you want to see vForm in action.

Download

Download vForm 2.0 and try it out. To use it, you will also need to download a copy of Prototype.

Download vForm 2.0

Or, maybe just have a look at the javascript? I've tried to keep it readable and well documented. I might try to create a compressed version later on.

Reader comments

  1. I already used vform 1.0, but 2.0 is even better !
    Just one question, what is the best way of checking whether a single checkbox is checked ? I keep having problems with that.

    20th April 2006, 22:51 CET. 
  2. I had the same problem, took a while to get a temporary solution to it.
    the checkbox array function was not designed for a single checkbox. so I added a hidden field with the same name as the checkbox.

    7th November 2006, 21:27 CET. 

Pages linking to this entry

Pingback is enabled on all archived entries. Read more about pingback in the Pingback 1.0 Specification.

About this post

Created 10th April 2006 21:12 CET. Filed under Javascript and DOM, PHP.

2 Comments
0 Pingbacks