A meeting room reservation form

Leave this field blank

Your name:*

Your email address:*

Department:*- select -MarketingOperationsCustomer ServiceHuman ResourcesSales DepartmentAccounting DepartmentLegal DepartmentOther...

Which room would you like to reserve:*

Room A

Room B

Room C

Extra requirements:

Flipchard and pens

Plasma TV screen

Coffee, tea and mineral water

Reservation date*

Date format is M d, Y

Reservation time :* -091011121314151617 -0030

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

<?php

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

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

    // the label for the "name" element
    $form->add('label', 'label_name', 'name', 'Your name:');

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

    // set rules
    $obj->set_rule(array(

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

    ));

    // "email"
    $form->add('label', 'label_email', 'email', 'Your email address:');
    $obj = $form->add('text', 'email');
    $obj->set_rule(array(
        'required'  =>  array('error', 'Email is required!'),
        'emails'     =>  array('error', 'Email address seems to be invalid!'),
    ));

    // "department"
    $form->add('label', 'label_department', 'department', 'Department:');
    $obj = $form->add('select', 'department', '', array('other' => true));
    $obj->add_options(array(
        'Marketing',
        'Operations',
        'Customer Service',
        'Human Resources',
        'Sales Department',
        'Accounting Department',
        'Legal Department',
    ));
    $obj->set_rule(array(
        'required' => array('error', 'Department is required!')
    ));

    // "room"
    $form->add('label', 'label_room', 'room', 'Which room would you like to reserve:');
    $obj = $form->add('radios', 'room', array(
        'A' =>  'Room A',
        'B' =>  'Room B',
        'C' =>  'Room C',
    ));
    $obj->set_rule(array(
        'required' => array('error', 'Room selection is required!')
    ));

    // "extra"
    $form->add('label', 'label_extra', 'extra', 'Extra requirements:');
    $obj = $form->add('checkboxes', 'extra[]', array(
        'flipchard'     =>  'Flipchard and pens',
        'plasma'        =>  'Plasma TV screen',
        'beverages'     =>  'Coffee, tea and mineral water',
    ));

    // "date"
    $form->add('label', 'label_date', 'date', 'Reservation date');
    $date = $form->add('date', 'date');
    $date->set_rule(array(
        'required'      =>  array('error', 'Date is required!'),
        'date'          =>  array('error', 'Date is invalid!'),
    ));

    // date format
    // don't forget to use $date->get_date() if the form is valid to get the date in YYYY-MM-DD format ready to be used
    // in a database or with PHP's strtotime function!
    $date->format('M d, Y');

    $form->add('note', 'note_date', 'date', 'Date format is M d, Y');

    // "time"
    $form->add('label', 'label_time', 'time', 'Reservation time :');
    $obj = $form->add('time', 'time', '', array(
        'format'    =>  'hm',
        'hours'     =>  array(9, 10, 11, 12, 13, 14, 15, 16, 17),
        'minutes'   =>  array(0, 30),
    ));

    $obj->set_rule(array(
        'required'      =>  array('error', 'Time is required!'),
    ));

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

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

        // show results
        show_results();

    // otherwise
    } else

        // generate output using a custom template
        $form->render();

?>

In this example, the output is automatically generated by Zebra_Form's render method.

<!-- must be in strict mode! -->
<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Zebra_Form Example</title>

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

    </head>

    <body>

        <!--

            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="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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>

    </body>

</html>