- A login form
- A contact form
- A registration form
- A reservation form
- Dependencies
- File upload
- More rules
|
A meeting room reservation form
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!
<?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!'),
'email' => 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');
// selectable dates are starting with the current day
$date->direction(1);
$form->add('note', 'note_date', 'date', 'Date format is M d, Y');
// "time"
$form->add('label', 'label_time', 'time', 'Reservation time :');
$form->add('time', 'time', '', array(
'hours' => array(9, 10, 11, 12, 13, 14, 15, 16, 17),
'minutes' => array(0, 30),
));
// "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('path/to/custom-template.php');
?>
<?php
// 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_name . $name?></div>
<div class="cell"><?php echo $label_email . $email?></div>
</div>
<!-- notice the "even" class which is used to highlight even rows differently
from the odd rows -->
<div class="row even">
<?php echo $label_department . $department . $department_other?>
</div>
<div class="row">
<div class="cell">
<?php echo $label_room?>
<!-- this is the preffered way of displaying checkboxes and
radio buttons and their associated label -->
<div class="cell"><?php echo $room_A?></div>
<div class="cell"><?php echo $label_room_A?></div>
<div class="clear"></div>
<div class="cell"><?php echo $room_B?></div>
<div class="cell"><?php echo $label_room_B?></div>
<div class="clear"></div>
<div class="cell"><?php echo $room_C?></div>
<div class="cell"><?php echo $label_room_C?></div>
<div class="clear"></div>
</div>
<div class="cell" style="margin-left: 20px">
<?php echo $label_extra?>
<div class="cell"><?php echo $extra_flipchard?></div>
<div class="cell"><?php echo $label_extra_flipchard?></div>
<div class="clear"></div>
<div class="cell"><?php echo $extra_plasma?></div>
<div class="cell"><?php echo $label_extra_plasma?></div>
<div class="clear"></div>
<div class="cell"><?php echo $extra_beverages?></div>
<div class="cell"><?php echo $label_extra_beverages?></div>
<div class="clear"></div>
</div>
</div>
<div class="row even">
<div class="cell"><?php echo $label_date . $date?></div>
<div class="cell" style="margin-left: 10px"><?php echo $label_time . $time?></div>
</div>
<!-- the submit button goes in the last row; also, notice the "last" class which
removes the bottom border which is otherwise present for any row -->
<div class="row last"><?php echo $btnsubmit?></div>
<!-- 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>
|