It provides an easy and intuitive way of creating template-driven, visually appealing forms, complex client-side and
server-side validations and prevention against cross-site scripting (XSS) and cross-site request forgery (CSRF) attacks
prevention.
For the form validation part you can use the built-in rules (i.e. required fields, emails, minimum/maximum length,
etc) and you can also define custom rules, with extreme ease, depending on your specific needs.
All the basic controls that you would find in a form are available plus a few extra: text, textarea, submit, image,
reset, button, file, password, radio buttons, checkboxes, hidden, captcha, date and time pickers.
One additional note: this class is not a drag and drop utility - it is intended for coders who are comfortable with
PHP, HTML, CSS and JavaScript/jQuery - you will have to build your forms when using this class, but it saves a great
deal of time when it comes to validation and assures that your forms are secure and have a consistent look and feel
throughout your projects!
Requires PHP 5.3.0+ (compiled with the php_fileinfo extension), and jQuery 1.6.2+
Visit {@link http://stefangabos.ro/php-libraries/zebra-form/} for more information.
For more resources visit {@link http://stefangabos.ro/}
function page_add_bookmark()
{
$form = new Zebra_Form('form');
$form->clientside_validation(array('close_tips' => true, 'on_ready' => false, 'disable_upload_validation' => true, 'scroll_to_error' => false, 'tips_position' => 'right', 'validate_on_the_fly' => true, 'validate_all' => true));
$form->add('label', 'label_url', 'url', 'URL');
$url = $form->add('text', 'url', 'http://');
$url->set_rule(array('required' => array('url_error', 'URL musí být vyplněno.'), 'url' => array(true, 'url_error', 'Pole musí obsahovat platné URL (včetně protokolu).')));
$form->add('label', 'label_title', 'title', 'Název stránky');
$title = $form->add('text', 'title', '');
$title->set_rule(array('required' => array('title_error', 'Název musí být vyplněn.')));
$form->add('submit', 'submitbtn', 'Přidat');
if ($form->validate()) {
$ok = model_add($_POST['url'], $_POST['title'], array());
if ($ok) {
flash('info', 'Záložka byla vytvořena');
} else {
flash('error', 'Záložku se nepodařilo vytvořit.');
}
redirect_to('/');
}
// set('form', $form->render('views/add_form.php', true));
set('form', $form->render('', true));
set('title', 'Nová záložka');
return html('add.html.php');
}
/**
Sets the formulary and returns the values of the fields
*/
function form()
{
require_once './forms/Zebra_Form.php';
// instantiate a Zebra_Form object
$form = new Zebra_Form('form');
// "submit"
$form->add('submit', 'btnBack', 'Volver a generar otra consulta');
// if the form is valid
if ($form->validate()) {
header("Location: sentwittmentForm.php");
exit;
// otherwise
} else {
// generate output using a custom template
$form->render('*vertical');
}
}
<h2>A meeting room reservation form</h2>
<p>Check the "Template source" tab to see how it's done!</p>
<?php
// include the Zebra_Form class
require '../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('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'));
<h2>Basic file upload</h2>
<p>Once you upload the file, don't forget to look into the "tmp" folder inside the "examples" folder for the result.</p>
<?php
// include the Zebra_Form class
require '../Zebra_Form.php';
// instantiate a Zebra_Form object
$form = new Zebra_Form('form');
// the label for the "file" element
$form->add('label', 'label_file', 'file', 'Upload Microsoft Word document');
// add the "file" element
$obj = $form->add('file', 'file');
// set rules
$obj->set_rule(array('required' => array('error', 'A Microsoft Word document is required!'), 'upload' => array('tmp', ZEBRA_FORM_UPLOAD_RANDOM_NAMES, 'error', 'Could not upload file!<br>Check that the "tmp" folder exists inside the "examples" folder and that it is writable'), 'filetype' => array('doc, docx', 'error', 'File must be a Microsoft Word document!'), 'filesize' => array(102400, 'error', 'File size must not exceed 100Kb!')));
// attach a note
$form->add('note', 'note_file', 'file', 'File must have the .doc or .docx extension, and no more than 100Kb!');
// "submit"
$form->add('submit', 'btnsubmit', 'Submit');
// validate the form
if ($form->validate()) {
// do stuff here
print_r('<pre>');
print_r($form->file_upload);
die;
}
// auto generate output, labels above form elements
$form->render();
<h2>A contact form</h2>
<p>Note the uneditable prefixes (text and images) for some of the fields.</p>
<?php
// include the Zebra_Form class
require '../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', '', array('data-prefix' => 'img:public/images/user.png'));
// set rules
$obj->set_rule(array('required' => array('error', 'Name is required!')));
// "email"
$form->add('label', 'label_email', 'email', 'Your email address:');
$obj = $form->add('text', 'email', '', array('data-prefix' => 'img:public/images/letter.png'));
$obj->set_rule(array('required' => array('error', 'Email is required!'), 'email' => array('error', 'Email address seems to be invalid!')));
$form->add('note', 'note_email', 'email', 'Your email address will not be published.');
// "website"
$form->add('label', 'label_website', 'website', 'Your website:');
$obj = $form->add('text', 'website', '', array('data-prefix' => 'http://'));
$obj->set_rule(array('url' => array(true, 'error', 'Invalid URL specified!')));
$form->add('note', 'note_website', 'website', 'Enter the URL of your website, if you have one.');
// "subject"
$form->add('label', 'label_subject', 'subject', 'Subject');
$obj = $form->add('text', 'subject', '', array('data-prefix' => 'img:public/images/comment.png'));
$obj->set_rule(array('required' => array('error', 'Subject is required!')));
// "message"
$form->add('label', 'label_message', 'message', 'Message:');
<h2>A login form</h2>
<?php
// include the Zebra_Form class
require '../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
$obj->set_rule(array('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');
$obj->set_rule(array('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
show_results();
// otherwise
} else {
// generate output using a custom template
$form->render('*horizontal');
}
<h2>A registration form</h2>
<?php
// include the Zebra_Form class
require '../Zebra_Form.php';
// instantiate a Zebra_Form object
$form = new Zebra_Form('form', 'post', '', array('autocomplete' => 'off'));
// the label for the "first name" element
$form->add('label', 'label_firstname', 'firstname', 'First name:');
// add the "first name" element
$obj = $form->add('text', 'firstname');
// set rules
$obj->set_rule(array('required' => array('error', 'First name is required!')));
// "last name"
$form->add('label', 'label_lastname', 'lastname', 'Last name:');
$obj = $form->add('text', 'lastname');
$obj->set_rule(array('required' => array('error', 'Last name is required!')));
// "email"
$form->add('label', 'label_email', 'email', '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!')));
// attach a note to the email element
$form->add('note', 'note_email', 'email', 'Please enter a valid email address. An email will be sent to this
address with a link you need to click on in order to activate your account', array('style' => 'width:200px'));
// "password"
$form->add('label', 'label_password', 'password', 'Choose a password:'******'password', 'password');
$obj->set_rule(array('required' => array('error', 'Password is required!'), 'length' => array(6, 10, 'error', 'The password must have between 6 and 10 characters')));
$form->add('note', 'note_password', 'password', 'Password must be have between 6 and 10 characters.');
// "confirm password"
$form->add('label', 'label_confirm_password', 'confirm_password', 'Confirm password:');
<h2>A login form</h2>
<p>In this demo we're creating a custom template using tables; this is suitable for creating "horizontal" templates (when
a control's label is to the left of the control). Don't forget to check the "Template source" tab to see how it's done.</p>
<?php
// include the Zebra_Form class
require '../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
$obj->set_rule(array('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');
$obj->set_rule(array('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
show_results();
// otherwise
} else {
/**
Sets the formulary and returns the values of the fields
*/
function form()
{
require_once './forms/Zebra_Form.php';
// instantiate a Zebra_Form object
$form = new Zebra_Form('form');
$form->clientside_validation(true);
// the label for the "query" element
$form->add('label', 'label_query', 'query', 'Query');
// add the "query" element
$obj =& $form->add('text', 'query', '', array('autocomplete' => 'off'));
// set rules
$obj->set_rule(array('required' => array('error', 'Se necesita una query')));
// "Return Per page"
$form->add('label', 'label_returnpp', 'returnpp', 'Numero de Tweets');
$obj =& $form->add('text', 'returnpp', 10, array('autocomplete' => 'off'));
$obj->set_rule(array('digits' => array('', 'error', 'El valor ha de ser un entero'), 'length' => array(0, 3, 'error', 'El numero es demasiado grande'), 'custom' => array('is_valid_number', 'error', 'El numero de Tweets debe ser menor de 500')));
// "Result Type"
$form->add('label', 'label_type', 'type', 'Tipo de resultado:');
$obj =& $form->add('select', 'type', 'mixed');
$obj->add_options(array('mixed' => 'Mixto', 'recent' => 'Reciente', 'popular' => 'Popular'), true);
// "submit"
$form->add('submit', 'btnsubmit', 'Buscar Tweets');
// if the form is valid
if ($form->validate()) {
$values = array();
foreach ($_POST as $key => $value) {
if (strpos($key, 'name_') !== 0 && strpos($key, 'timer_') !== 0 && strpos($key, 'response_') !== 0) {
$values[$key] = $value;
// echo $key . " " . $values[$key] . "<br>";
}
}
$_SESSION["values"] = $values;
header("Location: sentwittment.php");
exit;
// otherwise
} else {
// generate output using a custom template
$form->render('*horizontal');
}
}
<h2>Basic image upload</h2>
<p>We're checking for file types </p>
<?php
// include the Zebra_Form class
require '../Zebra_Form.php';
// instantiate a Zebra_Form object
$form = new Zebra_Form('form');
// the label for the "file" element
$form->add('label', 'label_file', 'file', 'Upload an image');
// add the "file" element
$obj = $form->add('file', 'file');
// set rules
$obj->set_rule(array('required' => array('error', 'An image is required!'), 'upload' => array('tmp', ZEBRA_FORM_UPLOAD_RANDOM_NAMES, 'error', 'Could not upload file!<br>Check that the "tmp" folder exists inside the "examples" folder and that it is writable'), 'image' => array('error', 'File must be a jpg, png or gif image!'), 'filesize' => array(102400, 'error', 'File size must not exceed 100Kb!')));
// attach a note
$form->add('note', 'note_file', 'file', 'File must have the .jpg, .jpeg, png or .gif extension, and no more than 100Kb!');
// "submit"
$form->add('submit', 'btnsubmit', 'Submit');
// validate the form
if ($form->validate()) {
// do stuff here
print_r('<pre>');
print_r($form->file_upload);
die;
}
// auto generate output, labels above form elements
$form->render();
<h2>Dependencies</h2>
<p>Showcasing how elements can be validated only if other elements meet certain conditions and how callback functions for the "dependencies" rule work.</p>
<?php
// include the Zebra_Form class
require '../Zebra_Form.php';
// instantiate a Zebra_Form object
$form = new Zebra_Form('form');
// add the "name" element
$form->add('label', 'label_name', 'name', 'Your name');
$obj = $form->add('text', 'name');
// set rules
$obj->set_rule(array('required' => array('error', 'Name is required!')));
// "notifications"
$form->add('label', 'label_notifications', 'notifications', 'Would you like to be informed about promotional offers?');
$obj = $form->add('radios', 'notifications', array('yes' => 'Yes', 'no' => 'No'));
$obj->set_rule(array('required' => array('error', 'Please select an answer!')));
// "method"
$form->add('label', 'label_method', 'method', 'Please specify how you would like to be notified about promotional offers:');
$obj = $form->add('checkboxes', 'method[]', array('email' => 'By e-mail', 'phone' => 'By phone', 'post' => 'By land mail'));
$obj->set_rule(array('required' => array('error', 'Please specify how you would like to be notified about promotional offers!'), 'dependencies' => array(array('notifications' => 'yes'), 'mycallback, 1')));
// "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!'), 'dependencies' => array(array('method' => 'email'), 'mycallback, 2')));
$form->add('note', 'note_email', 'email', 'Your email address will not be published.');
// "phone"
$form->add('label', 'label_phone', 'phone', 'Your telephone number:');
$obj = $form->add('text', 'phone');
$obj->set_rule(array('required' => array('error', 'Phone number is required!'), 'digits' => array('', 'error', 'Phone number must contain only digits!'), 'dependencies' => array(array('method' => 'phone'), 'mycallback, 3')));
<h2>Dependencies</h2>
<p>Notice how the elements from the "Add new person" section are validated *only* when the "Add new" button is clicked</p>
<?php
// include the Zebra_Form class
require '../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
$obj->set_rule(array('required' => array('error', 'Name is required!')));
// add the "surname" element
$form->add('label', 'label_surname', 'surname', 'Surname');
$obj = $form->add('text', 'surname');
// set rules
$obj->set_rule(array('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
$obj->set_rule(array('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
$obj->set_rule(array('required' => array('error', 'Surname is required!'), 'dependencies' => array('btnadd' => 'click')));
<h2>More validation rules</h2>
<?php
// include the Zebra_Form class
require '../Zebra_Form.php';
// instantiate a Zebra_Form object
$form = new Zebra_Form('form');
// "alphabet"
$form->add('label', 'label_alphabet', 'alphabet', 'Alphabet:');
$obj = $form->add('text', 'alphabet');
// set rules
$obj->set_rule(array('required' => array('error', 'This field is required!'), 'alphabet' => array('', 'error', 'Accepts only characters from the alphabet (case-insensitive a to z)')));
// attach a note
$form->add('note', 'note_alphabet', 'alphabet', 'Accepts only characters from the alphabet (case-insensitive a to z)');
// "alphanumeric"
$form->add('label', 'label_alphanumeric', 'alphanumeric', 'Alphanumeric:');
$obj = $form->add('text', 'alphanumeric');
$obj->set_rule(array('required' => array('error', 'This field is required!'), 'alphanumeric' => array('', 'error', 'Accepts only characters from the alphabet (case-insensitive a to z) and digits (0 to 9)')));
$form->add('note', 'note_alphanumeric', 'alphanumeric', 'Accepts only characters from the alphabet (case-insensitive a to z) and digits (0 to 9)');
// "digits"
$form->add('label', 'label_digits', 'digits', 'Digits:');
$obj = $form->add('text', 'digits');
$obj->set_rule(array('required' => array('error', 'This field is required!'), 'digits' => array('', 'error', 'Accepts only digits (0 to 9)')));
$form->add('note', 'note_digits', 'digits', 'Accepts only digits (0 to 9)');
// "float"
$form->add('label', 'label_float', 'float', 'Float:');
$obj = $form->add('text', 'float');
$obj->set_rule(array('required' => array('error', 'This field is required!'), 'float' => array('', 'error', 'Accepts only digits (0 to 9) and/or one dot (but not as the very first character) and/or one minus sign (but only if it is the very first character)')));
$form->add('note', 'note_float', 'float', 'Accepts only digits (0 to 9) and/or one dot (but not as the very first character) and/or one minus sign (but only if it is the very first character)');
// "length"
$form->add('label', 'label_length', 'length', 'Length:');
<h2>A contact form</h2>
<p>Note the uneditable prefixes (text and images) for some of the fields.</p>
<p>Check the "Template source" tab to see how it's done!</p>
<?php
// include the Zebra_Form class
require '../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', '', array('style' => 'width: 195px', 'data-prefix' => 'img:public/images/user.png'));
// set rules
$obj->set_rule(array('required' => array('error', 'Name is required!')));
// "email"
$form->add('label', 'label_email', 'email', 'Your email address:');
$obj = $form->add('text', 'email', '', array('style' => 'width: 195px', 'data-prefix' => 'img:public/images/letter.png'));
$obj->set_rule(array('required' => array('error', 'Email is required!'), 'email' => array('error', 'Email address seems to be invalid!')));
$form->add('note', 'note_email', 'email', 'Your email address will not be published.');
// "website"
$form->add('label', 'label_website', 'website', 'Your website:');
$obj = $form->add('text', 'website', '', array('style' => 'width: 400px', 'data-prefix' => 'http://'));
$obj->set_rule(array('url' => array(true, 'error', 'Invalid URL specified!')));
$form->add('note', 'note_website', 'website', 'Enter the URL of your website, if you have one.');
// "subject"
$form->add('label', 'label_subject', 'subject', 'Subject');
$obj = $form->add('text', 'subject', '', array('style' => 'width: 400px', 'data-prefix' => 'img:public/images/comment.png'));
$obj->set_rule(array('required' => array('error', 'Subject is required!')));
