Form Validation NG

50 %
50 %
Information about Form Validation NG

Published on February 15, 2008

Author: joaopmaia


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 • 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

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

Final look and feel Slide: 4 Source: Strategy Analytics

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

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

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 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

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

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

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) { // ... $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,'); } if (!empty($errors)) { $div = $doc->createElement(quot;DIVquot;); $div->setAttribute('id', 'header_error_validation'); // ... } // include <script> tags // ... return $changed_html; } ?> Slide: 14

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

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

Last slide PHP extensions JSON SimpleXML DOM Other tools Smarty Smarty – Block functions Smarty PHP Template Programming and Applications Slide: 17

Add a comment

Related presentations

Related pages

Form validation with AngularJS (ng-newsletter)

Hier sollte eine Beschreibung angezeigt werden, diese Seite lässt dies jedoch nicht zu.
Read more

AngularJS Form Validation - W3Schools Online Web Tutorials

Form Validation. AngularJS offers client-side form validation. AngularJS monitors the state of the form and input fields (input, textarea, select), and ...
Read more

Easy Form Validation in AngularJS with ngMessages

Tom Greco demonstrates how to validate user input in AngularJS using Angular's recently introduced ngMessages module, which keeps your code nice and DRY.
Read more

html - How to validate inputs dynamically created using ng ...

How to validate inputs dynamically created using ng-repeat, ng-show (angular) ... Just pass the form name you want to validate the inputs against.
Read more

AngularJS Form Validation | Scotch


Read more

AngularJS Forms -

AngularJS Forms. AngularJS Form Handling ... The ng-minlength and ng-maxlength form validation directives can be used to validate the length of data ...
Read more

Form Validation, The AngularJS Way - Bruno Scopelliti

In the above pen I wrote the code of the most simple case of form validation I ... .ng -pristine { border: ... and write custom directives to validate a ...
Read more

Angular Forms - W3Schools Online Web Tutorials

... but normally you will use it in AngularJS forms, to override standard HTML5 validation. « Previous ...
Read more

Paul Yoder - Bootstrap Form Validation Done Right in ...

Paul Yoder. 17th April, 2014 ... Form validation, ... using angular’s built in support on form validation? It seems ...
Read more

AngularJS Documentation for forms

Custom model update triggers. By default, any change to the content will trigger a model update and form validation. You can override this behavior using ...
Read more