Form Validation NG

3,384 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,384
On SlideShare
0
From Embeds
0
Number of Embeds
312
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×