Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Form Validation NG
João Prado Maia
Lead Software Developer, Alert Logic



8/2/2007
Introduction
• Background
   – Form validation is always a pain to
     implement
       • Too many moving parts
       • ...
Goals
• Validation both on client and server sides
   – Avoid form/HTTP-request spoofing
   – Validation rules are generat...
Final look and feel




               Slide: 4   Source: Strategy Analytics
Overview of client-side
{validation}
<form name=quot;test_formquot; ... >
...
</form>
{/validation}


Simple steps:
1.    ...
But wait, there’s more!
•       Not really, the {validation}
        function is all you need
    –      Done as a Smarty ...
Diagram of client-side




              Slide: 7
Diagram of client-side (2)




               Slide: 8
It’s all in the XML
• Both client and server sides use XML rules to
  validate the form input
   – One XML file per templa...
Example XML file
<?xml version=quot;1.0quot; encoding=quot;iso-8859-1quot;?>
<!DOCTYPE form_validation SYSTEM quot;form_va...
Overview of server-side
• Small changes needed
• Wrap form handling code with validation routine

<?php
$validation = new ...
Diagram of server-side




            Slide: 12
Smarty magic




           Slide: 13
Smarty magic (2)
• Smarty/plugins/block.validation.php
<?php
function smarty_block_validation($params, $content, &$smarty)...
Potential improvements
• Change the Form_Validation class to
  use the DOM extension
  – currently using SimpleXML
  – onl...
Features
• Works with or without JavaScript
  enabled on browser
• Validation code is centralized – no more
  duplication
...
Last slide
PHP extensions
    JSON
           http://us3.php.net/manual/en/ref.json.php
    SimpleXML
           http://us...
Upcoming SlideShare
Loading in …5
×

Form Validation NG

3,626 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Form Validation NG

  1. 1. Form Validation NG João Prado Maia Lead Software Developer, Alert Logic 8/2/2007
  2. 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. 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. 4. Final look and feel Slide: 4 Source: Strategy Analytics
  5. 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. 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. 7. Diagram of client-side Slide: 7
  8. 8. Diagram of client-side (2) Slide: 8
  9. 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. 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. 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. 12. Diagram of server-side Slide: 12
  13. 13. Smarty magic Slide: 13
  14. 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. 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. 16. Features • Works with or without JavaScript enabled on browser • Validation code is centralized – no more duplication • Dead-simple to implement Slide: 16
  17. 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

×