Stefan Gabos | webdeveloper
Example for: Zebra_Form, a jQuery augmented PHP library for HTML form building and validation


Notice how the elements from the "Add new person" section are validated *only* when the "Add new" button is clicked

Add new person

  • try clicking on the submit button without filling the form and then, as you fill the form, to see the JavaScript validation in action
  • for each example, notice how the PHP code of the form remains basically unchanged, despite the template variations
  • disable JavaScript to see the server-side validation in action
  • although in all my examples I use HTML output, you can switch to XHTML output by using the doctye method
  • try the example in another browser and see that it works, out of the box. including IE6!

     // include the Zebra_Form class
    require 'path/to/Zebra_Form.php';

    // instantiate a Zebra_Form object
    $form = new Zebra_Form('form');

    // add the "name" element
    $form->add('label', 'label_name', 'name', 'Name');
    $obj = $form->add('text', 'name');

    // set rules
        'required'  => array('error', 'Name is required!'),

    // add the "surname" element
    $form->add('label', 'label_surname', 'surname', 'Surname');
    $obj = $form->add('text', 'surname');

    // set rules
        'required'  => array('error', 'Surname is required!'),

    // elements for adding a new person

    // add the "name" element
    $form->add('label', 'label_add_name', 'add_name', 'Name');
    $obj = $form->add('text', 'add_name');

    // set rules
    // validate *only* if the "Add new" button is clicked
        'required'  => array('error', 'Name is required!'),
        'dependencies'  =>  array(
            'btnadd'    =>  'click',

    // add the "surname" element
    $form->add('label', 'label_add_surname', 'add_surname', 'Surame');
    $obj = $form->add('text', 'add_surname');

    // set rules
        'required'  => array('error', 'Surname is required!'),
        'dependencies'  =>  array(
            'btnadd'    =>  'click',

    // "add"
    $form->add('submit', 'btnadd', 'Add new');

    // "submit"
    $form->add('submit', 'btnsubmit', 'Finish');

    // if the form is valid
    if ($form->validate()) {

        // show results

    // otherwise
    } else


<?php echo (isset($zf_error) ? $zf_error : (isset($error) ? $error : ''))?>

<div class="row">
    <div class="cell"><?php echo $label_name . $name?></div>
    <div class="cell"><?php echo $label_surname . $surname?></div>

<div class="row even">
    <h6><strong>Add new person</strong></h6><br>
    <div class="cell"><?php echo $label_add_name . $add_name?></div>
    <div class="cell"><?php echo $label_add_surname . $add_surname?></div>
    <div class="cell"><br><?php echo $btnadd?></div>

<div class="row last"><?php echo $btnsubmit?></div>
<!-- must be in strict mode! -->
<!doctype html>



        <meta charset="utf-8">

        <title>Zebra_Form Example</title>

        <!-- load Zebra_Form's stylesheet file -->
        <link rel="stylesheet" href="path/to/zebra_form.css">




            the content from the "PHP Source" tab goes here


        <!-- we're loading the JavaScript files at the bottom of the page so we don't delay page rendering -->

        <!-- try to load jQuery from CDN server and fallback to local source if not available -->
        <script src="//"></script>
        <script>window.jQuery || document.write('<script src="path/to/jquery-1.9.1.min.js"><\/script>')</script>

        <!-- load Zebra_Form's JavaScript file -->
        <script src="path/to/zebra_form.js"></script>