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!')));