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

A login form

In this demo we're creating a custom template using only divs; this is suitable for creating "vertical" templates (when a control's label is above the control), but when we want some elements to be side-by-side. Don't forget to check the "Template source" tab to see how it's done.

  • 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', 'post', '', array('autocomplete' => 'off'));

    // the label for the "email" element
    $form->add('label', 'label_email', 'email', 'Email');

    // add the "email" element
    $obj = $form->add('text', 'email');

    // set rules

        // error messages will be sent to a variable called "error", usable in custom templates
        'required'  =>  array('error', 'Email is required!'),
        'email'     =>  array('error', 'Email address seems to be invalid!'),


    // "password"
    $form->add('label', 'label_password', 'password', 'Password');

    $obj = $form->add('password', 'password');


        'required'  => array('error', 'Password is required!'),
        'length'    => array(6, 10, 'error', 'The password must have between 6 and 10 characters!'),


    // "remember me"
    $form->add('checkbox', 'remember_me', 'yes');

    $form->add('label', 'label_remember_me_yes', 'remember_me_yes', 'Remember me', array('style' => 'font-weight:normal'));

    // "submit"
    $form->add('submit', 'btnsubmit', 'Submit');
    // if the form is valid
    if ($form->validate()) {

        // show results

    // otherwise
    } else

        // generate output using a custom template

    // don't forget about this for custom templates, or errors will not show for server-side validation
    // $zf_error is automatically created by the library and it holds messages about SPAM or CSRF errors
    // $error is the name of the variable used with the set_rule method
    echo (isset($zf_error) ? $zf_error : (isset($error) ? $error : ''));

<!-- elements are grouped in "rows" -->
<div class="row">

    <!-- things that need to be side-by-side go in "cells" and will be floated to the left -->
    <div class="cell"><?php echo $label_email . $email?></div>
    <div class="cell"><?php echo $label_password . $password?></div>

    <div class="clear" style="margin-bottom:10px"></div>

    <!-- on the same row, but beneath the email and the password fields,
    we place the "remember me" checkbox and attached label -->
    <div class="cell"><?php echo $remember_me_yes?></div>
    <div class="cell"><?php echo $label_remember_me_yes?></div>


<!-- the submit button goes in the last row; notice the "even" class which
is used to highlight even rows differently from the odd rows; also, notice
the "last" class which removes the bottom border which is otherwise present
for any row -->
<div class="row even 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>