1. Form Validation NG
João Prado Maia
Lead Software Developer, Alert Logic
8/2/2007

2. Introduction
• Background
– Form validation is always a pain to
implement
• Too many moving parts
• Not always standardized
– Built prototype in 2006
• Used JavaScript/AJAX for client-side
validation
• Not complete when doing fallback
server-side validation
• Required lots of small changes to forms
Slide: 2

3. Goals
• Validation both on client and server sides
– Avoid form/HTTP-request spoofing
– Validation rules are generated from the same
centralized source
– No duplication of validation code
• Works well with pre-existing Smarty templates
– Minimum amount of changes required on each form
– Not enough time to re-architect a complete data-model
form generation code
• Easy to understand code
Slide: 3 Source: IP Development Network. Understanding Your Business Customers

4. Final look and feel
Slide: 4 Source: Strategy Analytics

5. Overview of client-side
{validation}
<form name=quot;test_formquot; ... >
...
</form>
{/validation}
Simple steps:
1. Add extra {validation} tags around the form
2. ???
3. Profit!
Slide: 5

6. But wait, there’s more!
• Not really, the {validation}
function is all you need
– Done as a Smarty block function
– Parses XHTML content of form
– Sets up proper onBlur/onChange
event handlers to re-validate
error’ed-out forms
– Sets up onSubmit to process form
validation
Slide: 6

7. Diagram of client-side
Slide: 7

8. Diagram of client-side (2)
Slide: 8

9. It’s all in the XML
• Both client and server sides use XML rules to
validate the form input
– One XML file per template
– Easy to define validation rules per form and form field
– Multiple validation rules per form fields also possible
• Stores error messages as well
– Easy to extend into i18n error messages
• Adding a new validation rule is as easy as
implementing it in PHP – client-side comes for
free
Slide: 9

10. Example XML file
<?xml version=quot;1.0quot; encoding=quot;iso-8859-1quot;?>
<!DOCTYPE form_validation SYSTEM quot;form_validation.dtdquot;>
<form_validation>
<form name=quot;case_creation_formquot;>
<field stop_on_errors=“true” name=“user_emailquot;>
<validation type=quot;non_emptyquot;>
<error_msg>Enter your email address to be notified about this case.</error_msg>
</validation>
<validation type=quot;e-mailquot;>
<error_msg>Summary must be a valid e-mail address.</error_msg>
</validation>
</field>
<field name=quot;descriptionquot;>
<validation type=quot;non_emptyquot;>
<error_msg>Enter a description for this case.</error_msg>
</validation>
</field>
<field name=quot;priorityquot;>
<validation type=quot;non_emptyquot;>
<error_msg>Define a priority for this case.</error_msg>
</validation>
</field>
</form>
</form_validation>
Slide: 10

11. Overview of server-side
• Small changes needed
• Wrap form handling code with validation routine
<?php
$validation = new Form_Validation('template_name', 'form_name');
if ($validation->isValid()) {
/* Process form submission */
}
?>
• No need to handle errors, just display the template
again with the {validation} function
Slide: 11

12. Diagram of server-side
Slide: 12

13. Smarty magic
Slide: 13

14. Smarty magic (2)
• Smarty/plugins/block.validation.php
<?php
function smarty_block_validation($params, $content, &$smarty)
{
// ...
$doc = new DOMDocument();
@$doc->loadHTML($content);
foreach ($doc->getElementsByTagName('form') as $form) {
$form_name = $form->getAttribute('name');
$form->setAttribute('onsubmit',
'javascript: return validateForm(t_name, this.name)');
}
if (!empty($errors)) {
$div = $doc->createElement(quot;DIVquot;);
$div->setAttribute('id', 'header_error_validation');
// ...
}
// include <script> tags
// ...
return $changed_html;
}
?>
Slide: 14

15. Potential improvements
• Change the Form_Validation class to
use the DOM extension
– currently using SimpleXML
– only 1 required extension, instead of 2
Slide: 15

16. Features
• Works with or without JavaScript
enabled on browser
• Validation code is centralized – no more
duplication
• Dead-simple to implement
Slide: 16

17. Last slide
PHP extensions
JSON
http://us3.php.net/manual/en/ref.json.php
SimpleXML
http://us3.php.net/manual/en/ref.simplexml.php
DOM
http://us3.php.net/manual/en/ref.dom.php
Other tools
Smarty
http://smarty.php.net
Smarty – Block functions
http://smarty.php.net/manual/en/plugins.block.functions.php
Smarty PHP Template Programming and Applications
http://smartybook.com
Slide: 17