Zebra_Form, a jQuery augmented PHP library for creating and validating HTML forms

Get the latest updates on this PHP library via RSS

Zebra_Form, a jQuery augmented PHP library for creating and validating HTML forms

Zebra_Form is a PHP library that simplifies the process of creating and validating HTML forms. Its object-oriented structure promotes rapid HTML forms development and encourages developers to write clean and easily maintainable code. It frees the developers from the repetitive task of writing the code for validating forms by offering powerful built-in client-side and server-side validation.

Zebra_Form has integrated cross-site scripting (XSS) prevention mechanism that automatically strips out potentially malicious code from the submitted data, and also features protection against cross-site request forgery (CSRF) attacks. It also prevents automated SPAM posts, out of the box and without relying on CAPTCHA by using honeypots.

Forms layout can be generated either automatically or manually – using templates. When generated automatically, the generated output validates as HTML 4.01 Strict, XHTML 1.0 Strict or HTML5, and has the same look & feel across all major browsers like Firefox, Chrome, Opera, Safari and Internet Explorer 6+.

It provides all the controls you’d expect in an HTML form and, additionally, date/time pickers, CAPTCHA and advanced AJAX-like file upload controls – see the documentation for validation rules that can be used out of the box.

The client-side validation is done using jQuery 1.5.2+

Zebra_Form‘s code is heavily commented and generates no warnings/errors/notices when PHP’s error reporting level is set to E_ALL.

Top

Features review

  • provides protection against cross-site scripting (XSS) and cross-site request forgery (CSRF) attacks out of the box
  • it automatically prevents automated SPAM posts using the “honeypot” technique (CAPTCHAs can also be used for even stronger protection)
  • provides both server-side and client-side validation (client-side validation is done using jQuery 1.5.2+) and has a lot of predefined rules that can be used out of the box; custom validation rules (including AJAX-based) can easily be added
  • forms’ layout can be generated either automatically or manually using templates
  • generated output validates as HTML 4.01 Strict, XHTML 1.0 Strict or HTML5
  • works in all major browsers like Firefox, Chrome, Opera, Safari and Internet Explorer 6+
  • code is heavily commented and generates no warnings/errors/notices when PHP’s error reporting level is set to E_ALL
  • has comprehensive documentation
Top

Requirements

PHP 5.0.2+ (preferably PHP 5.3.0 compiled with the “fileinfo” extension for more secure file uploads – read more at the change log for version 2.7.3)

jQuery 1.5.2+

Top

Installation

Download the latest version, unpack it, and put it in a place accessible to your scripts.

Top

How to use

Live demos

 

The HTML

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

<html>

    <head>

        <title>Zebra_Form Example</title>

        <meta charset="utf-8">

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

        <!-- load jQuery -->
        <script src="path/to/jquery.js"></script>

        <!-- load Zebra_Form's JavaScript file -->
        <script src="path/to/zebra_form.js"></script>

    </head>

    <body>

    <!-- the PHP code below goes here -->

    </body>

</html>

The PHP

<?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 "email" field
$form->add('label', 'label_email', 'email', 'Email');

// add the "email" field
$obj = $form->add('text', 'email', '', array('autocomplete' => 'off'));

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

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

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

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

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

    // do stuff here

}

// auto generate output, labels above form elements
$form->render();

?>

Live demos

Top

Download

version 2.9.2 (zip, 288KB)

If you find this library to be useful to you, you can support the author by donating a small amount via PayPal:

Zebra_Form is distributed under the LGPL.

In plain English, this means that you have the right to view and to modify the source code of this software, but if you modify and distribute it, you are required to license your copy under a LGPL-compatible license, and to make the entire source code of your derivation available to anybody you distribute the software to.

You also have the right to use this software together with software thas has different licensing terms (including, but not limited to, commercial and closed-source software), and distribute the combined software, as long as state that your software contains portions licensed under the LGPL license, and provide information about where the LGPL licensed software can be downloaded.

If you distribute copies of this software you may not change the copyright or license of this software.


You may also like:

Top

Documentation

Documentation Become a ninja.
Read the comprehensive documentation.

Top

Changelog

Click on a version to expand/collapse information.

version 2.9.2 (April 18, 2013)
  • fixed a bug introduced in the previous release that broke functionality in IE8 and below…yes, I forgot a console.log() in the code!
  • fixed a bug where the “image” control would not have the “alt” attribute set, and so the resulting HTML could not be validated by the W3C validator;
  • fixed a bug where the iFrame used for checking uploaded files client-side was sometimes be visible on IE8 and below;
  • changed how the upload path needs to be specified for the “upload” rule, which now needs to be a full web path (so not server path nor a relative path) and “process.php” and the “_upload” method in Zebra_Form.php will automatically determine the correct server path to where to upload the files to; hopefully this will solve the problems people were having; still, being behind a reverse-proxy will require manual adjustment of the logic used both in “process.php” and in the “_upload” method in “Zebra_Form.php”;
  • the “dependencies” rule now also supports “submit” buttons/images; see the example for a scenario where it makes sense;
  • removed the * (all) selector from CSS and now custom elements placed in both custom and auto-generated templates don’t suffer from it;
  • the “attach_tip” JavaScript method can now be used on any element, not just on those that already have rules attached;
  • clientside_validation method has a new “on_ready” property used for specifying a JavaScript function to be executed when the form is ready; useful for getting a reference to Zebra_Form object *after* it’s ready – see the documentation for an example;
  • updated Spanish language file; thanks WaKeMaTTa;
version 2.9.1 (March 10, 2013)
  • dropped support for PHP4; minimum required version is now PHP 5.0.2;
  • fixed some compatibility issues affecting the “dependencies” rule when used with radio buttons and jQuery 1.9.0+;
  • added support for date picker’s “always_show_clear” and “always_visible” properties; thanks to Sebastian Popa;
  • fixed a bug where the script would sometimes fail to determine the correct path for file uploads; thanks to John Prentice;
  • fixed a bug where dates having random extra white-space in them would pass validation; thanks to Arne Tarara;
  • fixed a bug where setting the “require_protocol” argument of the “url” rule to TRUE, had no effect client-side; thanks Stefan;
  • fixed an error in the documentation; thanks Stefan;
  • fixed a small bug where when specifying custom attributes for an element as a string rather than an array, would trigger a PHP warning; thanks Søren;
  • fixed a small issue with the file uploads where the content of the iFrame used for the client-side validation was destroyed before being fully loaded, resulting in a “Canceled” status rather than a 200 (OK); this was not affecting functionality;
version 2.9.0a (February 13, 2013)
  • fixed a bug where disabling weekdays resulted in date to never pass validation;
version 2.9.0 (February 10, 2013)
  • fixed a few depencies related bugs; thanks to Arne Tarara
  • fixed an issue that broke the library’s functionality when using jQuery 1.9.0 (which removed $.browser);
  • fixed a bug where date format not including days or month (like only ‘Y’ or ‘M, Y’, etc) would never pass validation; thanks to Hicham;
  • fixed a bug where the “Clear” button on the date picker was not using the string from the language file; thanks Nicola Tuveri;
  • fixed an issue where the library would break with plugins that hide the original elements and put in their places divs having the exact same classes as the original element; thanks to Daniele Picca
  • fixed a bug where the “length” rule was not taken into consideration when using “auto_fill” for elements having also the “digits” and/or “number” rule set;
  • fixed a bug where if the “length” rule had a fourth argument (the show_counter argumet), the error message would be empty;
  • fixed a bug where a text longer than set by the “length” rule could be set as default for an element;
  • fixed a bug in “process.php” which broke CAPTCHA images in PHP 5.4.0+ because the second argument to the “imagejpeg” function was an empty string instead of “null”; thanks to Thomas;
  • fixed an issue where elements having an empty string as name could be created;
  • fixed an issue where the library would sometimes generate “strict warnings” for PHP 5.3.0+;
  • custom attributes (like class names or other attributes) can now be specified when creating bulk radio buttons and checkboxes by adding a 4th argument; see the last example in each of the two links;
  • added Italian language file; thanks Nicola Tuveri;
  • updated German and French language files; thanks Andreas Schwarz;
  • some updates and corrections in the documentation; thanks to Hicham, Søren and Oliver Jones;
  • updated Zebra_DatePicker to version 1.6.7;
version 2.8.9e (January 17, 2013)
  • fixed a bug where dependencies were working only if the proxy element was a radio button or a checkbox; set thanks to Hicham;
version 2.8.9d (January 15, 2013)
  • fixed a bug where setting some of the date control’s properties would break the date picker; thanks to Bastian Flinspach;
  • fixed a bug where seting the “length” rule to having “0″ (no limit) as the upper limit, would set the element’s “maxlength” attribute to “0″; thanks to Bastian Flinspach;
  • fixed a bug where keypress events on an file upload control were ignored;
  • fixed a bug where the “clientside_validation” method was always using the default values if the form contained at least one file upload control; thanks to Antonio Marmolejo;
  • fixed a bug where the character count on textareas was not done correctly if the text contained characters that would get transformed into HTML entitite; thanks to Antonio Marmolejo
  • fixed some inconsistencies in the documentation;
  • updated Zebra_DatePicker to version 1.6.6;
version 2.8.9c (January 12, 2013)
  • fixed a bug where custom arguments for the “custom” rule were not passed correctly;
  • fixed a bug where dependencies on an element with no other rules would be ignored;
  • updated Zebra_DatePicker to version 1.6.5;
version 2.8.9b (January 10, 2013)
  • fixed a bug where since the last release the files upload control was not working anymore;
  • fixed a bug where the library would trigger a JavaScript error if none of the form’s element would have any validation rule;
  • some updates in the documentation
version 2.8.9 (January 08, 2013)
  • added a new rule called “dependencies”; using it you can now have conditional validation (elements that are validated only if one or more other controls have certain values); see the example and peek into the documentation;
  • for browsers that obey the “accept” attribute for file upload controls (at the time of writing Chrome 16+ and IE 10), the file browser will now only show the files defined by the “filetype” rule or images only if the “image” rule is set;
  • added a new method: auto_fill – call this method to instruct the library to automatically fill out all or only selected form’s fields with random content while obeying any rules that might be set for each control – huge time saver for when debugging forms; check out the example;
  • added a new method: captcha_storage by which the storage method for CAPTCHA values can be changed from “cookie” to “session”; useful for users who have very restrictive cookie policies;
  • uneditable prefixes can now be added to text and password inputs – like “http://” or an area code like “+(40)”, or images and html; check out the examples and the documentation;
  • users can now regenerate CAPTCHAS if needed; see the examples;
  • previously, server-side, dates where only checked for format but not also for direction and disabled dates so malicious users could manipulate the DOM and enter out-of-range values; now the validity of date values is also enforced server-side;
  • fixed a bug where the placeholder, if the element had margins, would not be correctly positioned; thanks to Faton Sopa;
  • fixed a bug where having elements with names representing array properties in JavaScript (length, constructor, prototype) would result in error messages not showing for that particular element in client-side validation;
  • fixed a bug which I thought it was fixed in 2.8.3 regarding the order in which rules are checked;
  • fixed a bug where when having “validate_on_the_fly” for client-side validation and moving away from a date control without selecting a date, would correctly show the error tip with the message, but the error would not automatically go away when selecting date, and the user would manually need to hide the error message;
  • fixed a bug in the CSS affecting notes placed after a date control on Internet Explorer 7;
  • fixed a bug where when using placeholders for textareas the “resize” icon (on browsers that automatically place it on textareas) would appear twice; thanks to Andrei Bodeanschi
  • fixed a bug where having an error message on select control with the “other” option selected, the error message would not automatically disappear once the “other” field was filled out;
  • fixed a WebKit-specific issue where Chrome & Safari seem to get it wrong for password fields when using various font families, and display really small dots instead of the discs that appear for every other browser – now WebKit browsers will behave as expected;
  • updated Zebra_DatePicker to version 1.6.4;
version 2.8.8 (November 08, 2012)
  • fixed a bug where the library would think that an & directly before a character is an HTML entity, and would incorrectly insert a semicolon after the “entity”; thanks to Arne Tarara
  • fixed a bug where for PHP versions prior to 5.2.0 the library would trigger an error when trying to set the CSRF cookie; thanks to hector;
  • fixed a bug where custom arguments were never actually passed to custom rules; thanks to Andreas;
  • fixed a bug where in PHP versions before 5.3 using a hyphen (dash) as among the extra allowed characters in the “alphabet”, “alphanumeric”, “float”, “digits”, “number”, rule would crash the script; thanks to Andreas
  • fixed an issue where a hack was needed in order for displaying SPAM or CSRF errors in custom templates; now a new $zf_error variable will be available in custom templates which will display these errors (in the same way as it errors are displayed after server-side validation); see an example in the documentation (the second code block); thanks to Thomas;
  • fixed an issue where assigning custom classes to elements upon adding them to the form (through the add() method) would break those elements as the custom class would replace the classes added by the library; the solution was to add custom classes through the set_attributes() method; now adding custom classes directly via the add() method will work as expected; thanks to Wim;
  • fixed a bug when reporting some internal errors;
  • added a new validation rule: “url” which validates URLs; see the documentation for more information;
  • inverted the order of the first two arguments of the csrf() method – if you are using the method, make sure you update the arguments order after updating Zebra_Form!
  • minor performance tweaks in the PHP code
  • updated Spanish language file; thanks to Delegado 3iti
  • updated Zebra_DatePicker to version 1.6.1
version 2.8.7 (September 15, 2012)
  • fixed a bug with the file upload control where client-side validation would correctly report an invalid upload path *only* if the “required” rule was also set; now, when uploading a file, the library will check if the upload path exists even if the “required” rule is not set; thanks to Jan;
  • fixed a bug where if the form was validated and submitted manually through JavaScript, the library would validate the form twice; also, updated the recommended way of doing manual form validation and submission – see documentaion;
  • fixed an issue where no custom HTML attributes (like “style”, for example) could be set for the select boxes generated by the Time control; thanks to Faton Sopa;
  • custom date pickers can now also be used; to disable the default date picker you’ll have to call the newly added disable_zebra_datepicker() method available for “date” elements; date format, direction and disabled dates will still apply and will be taken into account when validating the date, but the other properties will be ignored as are specific to Zebra_DatePicker; thanks to Faton Sopa for suggesting;
  • better error handling and documentation for when the library is trying to use cookies for storing the CSRF token, but output was already sent to the browser prior to instantiating the library, and output buffering is turned off in php.ini;
  • in previous versions, when using “horizontal” templates and, thus, tables, I was using the deprecated “valign” attribute on table cells and so the generated output was not valid HTML5; now it is handled from CSS by using “vertical-align”; thanks to Andreas;
  • additions and corrections to the documentation; thanks to Jan for spotting some errors!
version 2.8.6 (August 13, 2012)
  • fixed a bug where having the ‘other’ option set for select controls having non-numerical values, would result in the form never passing validation; thanks to Edward;
  • fixed a bug where for select boxes having non-numerical indices, a malicious user could submit other values than those defined when creating the form; thanks to Edward;
  • fixed a bug with the XSS cleaner, which apeared since the update in 2.8.4; thanks to Dimitri;
  • updated Zebra_DatePicker to version 1.4.1
version 2.8.5 (July 23, 2012)
  • fixed a bug where file controls were *always* requried even if the “required” rule was not set; thanks Andre
  • fixed a few bugs related to the generation of the CSRF token where the token was always generated with the default values and was re-generated each time the csrf() method was called;
  • the library will now automatically decide what method to use for storing the CSRF token (session or cookie) in so that if a session is already started it will store the token in session or in a cookie otherwise; thanks to PunKeel for the heads up;
  • the “render” method now accepts an optional third argument for bulk variable assignment (representing a quicker method than using the old “assign” method for each variable); thanks to serge.munoz
version 2.8.4 (July 19, 2012)
  • added protection against cross-site request forgery (CSRF) attacks; the protection is enabled by default, but offers a lower level of security as it is based on session cookies (cookies that expire when the browser is closed) rather than on PHP sessions – this is intentional so that it doesn’t interfere with your environment in case you don’t use sessions. Therefore, you are encouraged to use PHP sessions and to call the newly added csrf() method and properly configure your protection against CSRF attacks, in order to maximize the level of security of your forms.
  • fixed a few bugs related to the date control; thanks Jack Everson
  • fixed a bug where setting “validate_all” to true would have no effect; thanks Thomas
  • hopefully the bug where sometimes error messages remained stuck and could not be closed anymore, is now fixed;
  • placeholders now clone the parent element’s styles (padding, border, font style, font weight, font size)
  • previously when “scroll_to_error” was set to TRUE the page would scroll to the element.top – 10px which meant that the element in question was always too close to the top edge of the screen; now the library tries to scroll so that the element is vertically centered in the view port
  • updated the part of the library taking care of cross site scripting (XSS) prevention as per the latest developments in CodeIgniter (as that particular piece of code is taken from the CodeIgniter PHP framework)
  • all error messages now correctly report the file name and the line that caused the error; PHP’s trigger_error() shows the file and the line number where the function is called and we would always trigger the errors from one of the Zebra_Form’s file when the errors actually generate from user files;
  • hidden fields used by the library internally were previously available in the $_POST superglobal after submission and now are automatically stripped out so that we don’t pollute the $_POST;
  • the minimum required PHP version is now 4.3 instead of 4.2
  • there are some additions to the language files and if you speak one of the languages there i’d be thankful if you could provide some translations. thank you!
version 2.8.3 (July 08, 2012)
  • fixed a bug where using the “digits” rule in a form having – (dashes) in its name would crash the script;
  • fixed a bug where previously *all* the rules were checked in the order defined when creating the form, potentially leading to nonsense situations like having the “filetype” or “filesize” rules before the “upload” rule, or any other rule before the “required” rule; now, the “required” rule is *always* checked first, and the “upload” rule is *always* checked first if there is no “required” rule, or second if the “required” rule is set; thanks Ovidiu Mihalcea
  • fixed a bug where the developer could forget to set the “upload” rule for a file upload control; now, failing to do so will result in an error
  • fixed a bug where the file upload control was not working in IE7; thanks to Ovidiu Mihalcea
  • fixed a bug where the “required” rule could not be set for “time” controls; thanks to Adrian North
  • fixed a bug where not selecting an option for a select box having the “multiple” attribute set, but no “required” rule, would trigger the spam filter; thanks to Faton Sopa
  • fixed a bug where labels inside text boxes were vertically centered only for the default size of the controls; this behavior could be observed when setting different heights or padings for the text boxes;
  • fixed a bug where if the process.php and mimes.json files could not be found by the script, the developer would not be able to set the correct paths through the assets_path() method, as the script was looking for those files in the constructor, and hence would break execution before executing anything else; thanks to Ovidiu Mihalcea;
  • fixed a bug where the script would not be able to determine the paths to process.php and mimes.json files if PHP’s “allow_url_fopen” was not set to true; thanks to Andrei Bodeanschi;
  • fixed a bug where file upload controls were submitted in the background on the “onchange” event even when the “upload” rule was not attached; also, the library will now trigger an error if a file upload control doesn’t have the “upload” rule attached;
  • by default, for check boxes, radio buttons and select boxes, the library will prevent the submission of other values than those declared when creating the form, by triggering the error: “SPAM attempt detected!”; therefore, if you plan on adding/removing values dynamically, from JavaScript, you will have to call the newly added disable_spam_filter() method – available for check box, radio button and select box elements – to prevent that from happening;
  • a new property of Zebra_Form is now available: “file_upload_permissions” which can be used to set the filesystem permissions for uploaded files;
  • 12 hour format can now also be used for the “time” control; thanks to Marty
  • changed the name of the “first_day_of_the_week” method (available for the “Date” control) to “first_day_of_week”; thanks to Edward for the feedback
  • default padding for text boxes, text areas, passwords and selects was changed from “padding: 4px 3px 3px” to “padding: 5px” (in zebra_form.css) thus slightly increasing their size; note that this might break your layout, so be careful and change it back if it does so;
  • updated Zebra_DatePicker to version 1.4
  • most examples were updated
  • some corrections and additions to the documentation;
version 2.8.2 (May 11, 2012)
  • the upload rule now has also a client-side validation side, where it checks if the indicated path exists and is writable
  • fixed a bug for file uploads where, if the name of the uploaded file was too long, the “x” for canceling was not visible anymore
  • fixed a bug where, after selecting a file, by clicking very close to the file’s name, users could open the file picker again, resulting in bogus visuals
  • fixed a bug which made the file name not to appear for an upload control having “upload” as the sole attached rule
  • updated Zebra_DatePicker to version 1.3.2
  • fixed a bug where setting the first day of week as anything other than Monday was not working; all credit goes to Edward!
version 2.8.1 (April 07, 2012)
  • elements can now be validated “on-the-fly” where an element is validated as soon as it looses focus; use the newly added “validate_on_the_fly” flag for the “client_side_validation”; thanks to François Rigaudie and Konstantin Stoyanov
  • all error messages can now be shown on form submit rather than only the first one; use the newly added “validate_all” flag for the “client_side_validation”; thanks to François Rigaudie and Konstantin Stoyanov;
  • file names can now be prefixed with a given string when uploading files (using the “upload” rule); thanks to Robert Warelis;
  • the library now triggers an error message if a “date” control doesn’t have the “date” rule set. note that this rule cannot be set automatically since it requires an error message to be set by the developer. thanks to bastian;
  • the “length” rule, set with the 4th argument to TRUE, will now always show the character counter; previously, the character counter was shown only if the lower limit was 0. thanks to Andy Vogar;
  • fixed a bug in the JavaScript code regarding the file upload control which was not working with jQuery UI. thanks to edward for fixing it;
  • fixed a bug where validation would fail if there were two or more file upload controls on a form. thanks to edward for fixing it;
  • fixed a bug where the class for disabled control was not correctly applied;
  • updates in documentation
  • updated Zebra_DatePicker to version 1.3.1
version 2.8 (March 10, 2012)
  • fixed a bug where the attach_tip() JavaScript method was not working properly; thanks to Andrei Bodeanschi
  • previously, the placeholders were injected to the bottom of the main document rather than right after the parent element and thus generating issues like placeholder remaining visible when hiding the parent element’s container; now the placeholders are injected in the DOM right next to the parent element;
  • fixed a bug where because of the fact that JavaScript and PHP treat new lines, accented characters and special characters differently (1 byte in JavaScript and 2 or 3 bytes in PHP), server-side validation of a maximum allowed length would sometimes fail if a textarea’s value would contain new lines, although client-side validation was ok; thanks to Andrei Bodeanski for spotting it;
  • fixed a bug where setting the “readonly_element” property to FALSE on a date element had no effect; thanks to bastian
  • fixed a bug where a date element’s “get_date” method was triggering a warning if the the element was not required and no date was selected; thanks to bastian
  • the “length” rule now accepts a 5th argument instructing the script to show a counter of remaining characters;
  • added a new method available for text, textarea and password controls, called change_case which can be used to instruct the script to force all letters typed by the user, to either uppercase or lowercase, in real-time;
  • added documentation on how to access the Zebra_Form object in JavaScript, with examples;
  • added documentation on how to use AJAX in custom validations (scroll down to the “custom” rule and keep reading);
  • tweaked the default CSS style of the date control which was a bit too short;
  • updated Zebra_DatePicker to version 1.2
version 2.7.7 (January 18, 2012)
  • fixed a bug that made disabling dates impossible; thanks to Andrei Bodeanschi
  • fixed a bug with the “convert” rule that made it always delete the converted image immediately after conversion, if the “overwrite” argument was set to TRUE
  • added albanian translation; thanks to Faton Sopa
version 2.7.6b (December 06, 2011)
  • fixed a bug where placeholders (labels used as “hints” inside text/password/textarea controls) would not follow their parent control upon resizing the browser window;
  • sometimes error messages get stuck and cannot be closed; although I couldn’t find the root of the problem I’ve done some tweaks and it seems to be working a bit better now (especially error messages related to file upload controls). the whole logic around error messages needs to be rewritten tough, as I realized that there are some faulted approaces there.
version 2.7.6 (December 06, 2011)
  • fixed a bug that appeared since the last version that made file uploads to never pass validation
version 2.7.5 (November 20, 2011)
  • fixed a bug where using multiple forms on a single page would disable client-side validation for all forms but the first one; thanks to Pedro Abreu for reporting;
  • fixed a bug where if there were selection groups in a select, it would never pass validation;
  • fixed a bug where placeholders (labels as hints inside textboxes and textareas) were not working on textareas; thanks to Chris for reporting it a long time ago and to Andrei Bodeanschi for recently reminding me about it;
  • elements that have display:none or visibility:hidden are no longer checked in the client-side validation process;
  • the Zebra_Transform plugin is not included anymore in the library; it can be downloaded and used separately from here if needed; as a result, the form’s fancy_form() method is also gone;
  • some additions to documentation;
version 2.7.4 (September 27, 2011)
  • fixed another bug that would make date validation impossible in certain scenarios;
  • minor updates to the JavaScript code;
version 2.7.3 (September 16, 2011)
  • fixed a bug where dates having the day < 10 would not pass validation; thanks to Dev for reporting;
  • fixed a bug where Zebra_TransForm was incorrectly initialized and was transforming controls on the entire page rather than just the current form’s controls
  • fixed a bug that made impossible to set custom classes for the actual <form> tag, through the form’s constructor method; thanks to Sebi Popa for reporting;
  • fixed a bug that would cause the script to trigger a warning when a select control would have [] (square brackets) in its name but the multiple attribute was not also set;
  • fixed an issue that allowed malicious users to submit arbitrary values instead of the ones defined at the form’s creation, for select controls, checkboxes and radio buttons; the severity of the issue was low as the submitted values were still filtered for cross-site scripting (XSS) attempts, so no real harm could be done; thanks for PunKeel for reporting;
  • previously, the library would rely on information available in the $_FILES super-global for determining an uploaded file’s mime type, which, as it turns out, is determined by the file’s extension, representing a potential security risk; now, for PHP versions 5.3.0+ compiled with the “php_fileinfo” extension, the uploaded file’s mime type is determined using PHP’s finfo_file function; thanks to DaveK for reporting;
  • now the script throws a JavaScript error if the JavaScript function required by a custom validation doesn’t exists; previously, it would silently ignore the fact;
  • updated the Zebra_DatePicker to version 1.1.2
  • updated documentation to reflect the recent changes in the Zebra_Image library
version 2.7.2 (August 29, 2011)
  • fixed a bug in the date picker’s JavaScript code regarding event delegation that would crash the script in certain scenarios; thanks to Sebi Popa for spotting it!;
version 2.7.1 (July 30, 2011)
  • fixed a bug where date would never validate for languages other than English; thanks to alfred;
  • the form now completely adheres to http://www.w3.org/TR/WCAG20-TECHS/H44.html which requires that all controls have an associated label; previously, the honeypot element did not have an associated label. thanks to Alexis;
  • minor optimizations in the PHP code;
  • some clarifications in the documentation regarding the “resize” rule;
version 2.7 (July 19, 2011)
  • added a new validation rule called filetype; with this rule one can restrict the types of files that are upload-able by specifying a list of allowed file extension; it’s important to note that validation is not done by file extension but by the MIME type of the uploaded files; for this, a new file is available in the root of the library called mimes.json containing the currently supported extensions and associated MIME types;
  • the library now makes use of the Zebra_TransForm jQuery plugin to replace radio buttons, check boxes and select boxes with nicer ones; see the newly added “fancy_form” method for configuration;
  • due to popular request CAPTCHA images are now easier to read;
  • if the script was run on a virtual host, it could not correctly determine the path to the “process.php” file (this file is used for validating uploads client-side and for CAPTCHAs);
  • fixed a bug that would break the file upload control when the form name had dashes in it (i.e. “my-form”); thanks to MarcosBL;
  • fixed a bug that was introduced in the previous version that made disabling the client-side validation impossible;
  • fixed a bug that caused the name of the uploaded file to appear in the wrong position;
  • fixed a bug where the “date” control’s “get_date” method was returning a string enclosed in an array rather just the plain string;
  • fixed a bug where the “date” control’s “direction” method was not working when using “false” as argument;
  • some clarification in the documentation regarding the upload rule;
  • some clarification in the documentation regarding the set_attribute method; thanks to Jack Ryan;
  • added French language file; thanks to Sébastien GASTARD;
  • added German language file; thanks to Chris Banford;
version 2.6.1 (July 01, 2011)
  • fixed a bug where the settings for client-side validation would get reset if a file upload control was added to the form. thanks to kszys for reporting.
  • fixed a bug where the client-side validation would crash when the format of the date contained day names or month names. thanks to Chris for reporting.
  • fixed a bug where determining the path where the library is located (for executing the process.php file required for AJAX-like uploads) was not working for certain configurations. thanks to kszys for helping.
  • fixed a bug that would crash the script if date format would contain “/” (slashes) – thanks to Jack Ryan for reporting
  • fixed a bug where the length rule was tested even if the element had no value nor was the required rule set. unless the required rule is set, the length rule is not to be tested as long as there is no value entered.
  • additions to the documentation of radio buttons and checkboxes. thanks to kszys the suggestion.
  • additions to the documentation of the “upload” rule where it is now stated that after the rule is run, the DOM element the rule is attached to will get an attribute called file_info which will contain information about the uploaded file, usable in the JavaScript part of a custom function.
  • Spanish language file added – thanks to José Machado for providing it
version 2.6 (June 24, 2011)
  • fixed a bug that broke the “resize” rule (thanks to jose for reporting)
  • added an extra example for the “resize” rule on how to create multiple sizes of an uploaded image by using the resize rule.
version 2.5 (June 21, 2011)
  • fixed a bug where the labels inside controls were not working in Internet Explorer prior to 9
  • corrected the documentation about how to access the JavaScript object (thanks to Jonathan Kratzke for reporting)
version 2.4 (June 20, 2011)
  • fixed a bug where the regexp rule was not working if the regular expression contained parentheses (thanks to Sebi Popa and to Dragos Oancea for reporting)
version 2.3 (June 19, 2011)
  • fixed a few bugs related the “date” control (thanks to Jack Ryan for reporting)
  • fixed a bug that affected file upload validation
version 2.2 (June 11, 2011)
  • fixed a bug where, for custom validations, the JavaScript function was not getting any additional arguments except the element’s value (thanks to Robert Grzesinski for reporting)
  • fixed a bug where the “date” control would add an invalid attribute to the element that would cause the generated output not to pass the W3C validation
  • fixed a bug where in the newest versions of PHP 5 the script would generate “PHP Strict Standards” notices because of how mktime() (with no arguments) and array_shift() is treated in these versions
  • some documentation updates and clarifications (thanks to Andrei Bodeianschi for suggesting some of those)
version 2.1 (June 02, 2011)
  • ported the client-side validation to jQuery
  • the “date” control has some new methods thanks to the integration with the Zebra_Datepicker jQuery plugin
  • regardless of the format used for a date, the submitted date can now easily be retrieved in YYYY-MM-DD format for use with a database or with PHP’s strtotime function by using the newly added get_date() method;
  • Zebra_Form was not working if the jQuery was loaded at the end of the page (thanks to Sebi P for reporting)
  • fixed a bug with custom validation rules
  • fixed a bug with “selects” having the “other” option set
version 2.0 (April 10, 2011)
  • added client-side validation. requires MooTools 1.2.5+
  • added automatic handling of file uploads. the script can now automatically upload files to a specified folder. it can also automatically check for valid image files, permitted file size and it can also automatically resize uploaded images (requires the Zebra_Image class)
  • a new method is now available: reset() which clears the values of all the form’s controls
  • added a new control type: “time”; this outputs a time picker
  • controls now have rounded corners (in browsers that support CSS3) and have a :hover state
  • infinite levels of nested option groups can now be created for “select” controls (until now, only one level could be created);
  • select controls now have a default, language dependent, “- select -” option
  • select controls can now have a new attribute: “other”. when set, a text box control will be automatically created having the name “[control_name]_other” (where [control_name] is the name of the select box). the text box will be hidden until users select the automatically added “Other…” option from the selectable options.
  • dropped XTemplate templating engine in favor of pure PHP templating
  • the generated HTML validates as HTML 4.01 Strict. If you want it to validate as XHTML 1.0 Strict use the newly added doctype() method
  • access keys can now be set for labels
  • added a bunch of new validation rules
  • improved CAPTCHA control
  • a new “control” is available – you can now add “notes” (information boxes telling the users what they are expected to enter/select in a field) in the same way as adding “labels”
  • fixed a bug regarding XSS prevention
  • fixed a bug where the “number” rule would not allow the input of negative numbers
  • fixed a bug where the “compare” rule would validate when the values was compared to that of a nonexisting control
  • fixed a bug where option groups couldn’t be created for the “select” control
  • fixed a bug that appeared since the last release that caused emails to never pass validation
  • fixed a bug that would not render the captcha image on some systems
  • many documentation refinements
version 1.2 (September 22, 2008)
  • a new feature has been added: automatic output generation. if your form does not need any special output format, you can simply call the render() method without specifying a template name to let the script handle it, thus saving you some time as you are not needed to also code the form’s layout.
  • a new type of controls has been added: “html”. with this you can insert arbitrary HTML code into your forms. This is usefull when you don’t use templates but rather let the script generate your forms and you need to have some extra HTML in your forms (notes, descriptions, etc) – because letting the script to automatically generate your forms means that you don’t have a template to insert your HTML code into
  • arrays of custom rules can now be set for controls; up until now, only one custom rule per control could be set
  • generated forms are now (more) W3C compliant
  • CAPTCHA is now case insensitive
  • default template is now nicer
  • better error reporting
  • fixed a few minor bugs
  • many documentation refinements
version 1.1.1 (May 08, 2008)
  • rewritten css for the default template
  • fixed a bug where submitting array-like controls (multiple checkboxes with sharing the same name or a “select” control with “multiple” set) would crash the script
  • fixed a bug where submitting text fields with empty spaces would pass the validation for “required” fields
  • fixed a bug where the captcha image was not updated upon submission
  • upon submission, all characters were transformed to their applicable html entities, which could cause a lot of headaches if you were submitting text in other language than english
version 1.1 (December 03, 2007)
  • added *heavy* XSS (cross site scripting) injection prevention (the class used for filtering for XSS injection is the Input class from the CodeIgniter PHP framework
  • previously some accented characters got scrambled upon submission as htmlentities() was being called without the UTF-8 argument
  • fixed an error where, when having multiple forms on a page, all forms were processed upon submission
version 1.0 (June 02, 2007)
  • trying to change the main template of the class had no effects
  • the class was not working correctly in PHP 4.x.x
  • fixed an error where using a nonnumeric index for the first element in a “select” control (indicating the “nothing selected” condition of the control) would lead to a crash
  • added validation rule for a list of comma separated email addresses
  • many people have asked for it so i’ve added an example on how to use the radio controls, the checkbox controls and on how to do quick custom validations
  • multiple instances of the form could not be created on the same page
  • error messages can now be customized from the main template (the one in the /templates folder) – thanks to Claude Quezel for suggesting
  • custom blocks can now be parsed in the form’s template by using the newly added “parseBlock” method
  • the “addOptions” method of the “select” control was overwriting any previously set options. now subsequent calls to this method will append options to the existing ones
  • custom form actions can now be specified – previously, forms were always submitted to themselves
  • a new property was added: “locked”. by default, when a form is reloaded after a submission, all the controls will have their respective submitted value, while the default value set by user will be ignored. setting this property to TRUE, will make the controls preserve their user-provided default values, ignoring the submitted value
  • previously, only variables could be passed to the addVar method. now strings and constant can also be passed
  • multiple options can now be preselected for select controls having the “multiple” attribute set (read the documentation for the constructor of select controls) – this one was actually working just wasn’t documented. thanks to sridhar for reporting
  • in order to make the generated output valid XHTML 1.0, the label controls no longer have the “name” attribute and the form has now the “action” attribute set; also the “selected” attribute is now correctly set for “select” ontrols (thanks to Claude Quezel)
  • made some changes in the main template’s CSS file, provided by Claude Quezel, that makes the fieldsets look in the same way in Firefox and Opera as in IE – thanks!
  • on some PHP installations file upload was not working (enctype and max_file_size were not being set)
version 1.0 BETA 3 (February 17, 2007)
  • for the “select” control, if options were specified having literal keys and the “required” rule was set, the control would never pass validation (thanks to sridhar for reporting)
  • a major security issue was fixed where an attacer could inject arbitrary HTML and/or JavaScript code along with the submitted data. now all the submitted data is passed through the htmlentities() function and, if magic_quotes are on, are stripslashed (thanks to Bartosz for reporting)
  • file uploads were not working because neither “enctype” nor MAX_FILE_SIZE were set upon the rendering of the form
  • if you would set a checkbox’s state as “checked” by default, any subsequent submits would set the checkbox’s value to “checked” even if user would uncheck it (thanks to sridhar for reporting)
  • “required” rule could not be set to the “file” control (thanks to sridhar for reporting)
  • a new method was added: “addVar()”. through this method, user defined variables can be made accessible from within the form’s template file
  • added a new control: “captcha” which generates CAPTCHA images
  • password controls no longer re-display the entered value
version 1.0 BETA 2 (January 05, 2007)
  • fixed various bugs in code, example and documentation;
  • in Firefox, trying to open the date picker would produce a JavaScript error;
  • the icon for opening the date picker was not visible in Firefox;
version 1.0 BETA (December 19, 2006)
  • initial release;

Top

902 responses to “Zebra_Form, a jQuery augmented PHP library for creating and validating HTML forms”

Follow the comments via RSS
  • Bastian, 2012-02-16, 15:39

    Hi,

    This library is really great! Thanks for providing and maintaining it!
    It is however, not without it’s flaws. Two problems I ran into with the Date Control:

    1. readonly_element seems to do nothing. Whatever I try, I am not able to write in the field.
    2. get_date may throw an error, when the control was not validated. This happens for example, if you validate for date, but the field is not required.

    I will keep you informed, if I run into other problems.
    Again, thanks for your awesome work!

    best,

    bastian

    Reply
    • Stefan Gabos, 2012-02-16, 15:48

      1. that’s what readonly_element does, as its name also suggests…quoting from the documentation, “If set to TRUE, a date can be set only through the date picker and cannot be entered manually.”

      2. I’ll investigate that, but you must be doing something wrong as calling the get_date method should be used inside “if ($form->validate())” and therefore should always receive a valid date (because all date controls should have the “date” rule set)

    • Bastian, 2012-02-28, 10:14

      Hi Stefan,

      sorry for the late answer, haven’t been here in a while.

      regarding 1: Yes, I know that is what it should do, but it had no effect for me. I tried setting it to false via the method and also via set_attributes, but in either case I could not write in the date picker field. Did I miss something else?

      regarding 2: You are of course right that it should get checked when a valid date is required (Though I must admit, I forgot that that rule was necessary when I first used the field. Should it probably be built in, since it is not really optional?)
      However, the problem arises, when the field requires a valid date but is not required to be filled (I wanted the user to be able to submit an empty value). In that case, when trying to access the field via date_get, it shows a warning, since get_date tries to access a property that is not set.

      best regards,

      bastian

    • Stefan Gabos, 2012-03-02, 06:40

      Thanks Bastian, I’ll investigate. 1 must be a bug, and I’ll have a look at it while for 2, I also tend to forget about specifically setting the “date” rule, but it has to be set manually as the error message needs to be set and directed to a variable. So far, the best idea I could come up with was to trigger a warning if the date rule is not set for a date control. Also, I’ll change the code so that, get_date will return false if there was no date entered. Thanks again.

  • Dimitri, 2012-02-20, 23:30

    Hi Stefan.
    Is it possible to recover data from a database and reinject it in a checkbox input. For exemple, I’ve a table with 3 entries : red, green and blue and i want to make a form with a checkbox input proposing these 3 values.
    Thank a lot !

    Reply
    • Dimitri, 2012-02-21, 01:07

      I’ve succeeded whith this :

      $infos = read_infos();
      foreach($infos_specialites as $donnees) {
          $obj = $form->add(
              'checkboxes',
              'infos[]',
              array($donnees[id]  => $donnees[name])
          );
      }
      

      When i make a render(), it works, i can see all my checkboxes but i’m trying to do the same with a custom template and it’s more difficult. Have you got an idea ?

  • Petr, 2012-02-29, 20:02

    Hi,

    is it possible to change or disable input validation (required field, specific format etc.) via javascript after form is rendered? For example – field “bank account” displayed/required/validated only if “wire transfer” option is selected as the payment option.

    Thanks.
    P.

    Reply
    • Lim Tjie Siong, 2012-03-10, 15:44

      I have the same issue with you. I want to make a text input into required if other option was select at certain number. I don’t know how to do it using zebra form? thx

  • Antonio, 2012-03-06, 10:19

    Hi, great class. Very useful and easy to integrate.

    I have a question though. I’m working on a registration form and I’d like to check if the username is already used before the form is submitted. I usually use AJAX for that. Can I do that with your class? Where and how could I intergrate this in the form?

    Another question, when the form validation is ok, are the variables transformed to prevent SQL injections or should I stills use mysql_real_escape_string?

    One request for next version. Could it be possible to visually give information about the password strenght? Some red-orange-green dot? In the validation process, could we check and prevent low security passwords, like “123456″?

    Another request: Could you integrate reCAPTCHA as an alternate CAPTCHA?

    And the last question (or request). In further works, I’ll use an “improved” textarea using CKEditor (www.ckeditor.com), could it be possible to integrathe that in the next update?

    Thanks again for your work.
    Antonio

    Reply
    • Stefan Gabos, 2012-03-09, 18:55

      regarding 1, the answer is a bit longer. this is how i do it:
      in my main JavaScript file I have something like

      var valid = null,
      
      // I have functions like this for everything that I need 
      // checked through AJAX; note that they are in the global 
      // namespace and outside the DOM-ready event
      
      // functions have to return TRUE in order for the rule 
      // to be considered as obeyed
      function username_not_taken(username) {
        $.ajax({data: 'username=' + username});
        return valid;
      }
      
      function emailaddress_not_taken(email) {
        $.ajax({data: 'email=' + email});
        return valid;
      }
      
      // in the DOM ready event
      $(document).ready(function() {
      
        // I setup an AJAX object that will handle all my 
        // AJAX calls
        $.ajaxSetup({
          url: 'validate/',   // work will be done in PHP
          type: 'post',
          dataType: 'text',
          async: false,       // this is important!
          global: false,
          beforeSend: function() {
            valid = null;
          },
          success: function(data, textStatus) {
            if (data == 'valid') valid = true;
            else valid = false;
          }
        });
      
          // ...other JavaScript code for your website...
      
      }

      I also have a “validation.php” “helper” file which contains those PHP functions, and which is included both on the page where I create the form (used by the server-side validation) and by the file defined by the “url” property in the AJAX object. This might look something like:

      <?php
      function username_not_taken($username)
      {
        // check for username and return TRUE 
        // if it's NOT taken or FALSE otherwise
      }
      
      function emailaddress_not_taken($email)
      {
        // check for email address and return TRUE 
        // if it's NOT taken or FALSE otherwise
      }
      ?>

      when I create a form I include this “helper” file because the functions in it will be used by the server-side validation, and set the custom rules like this:

      require 'path/to/validation.php';
      $obj->set_rule(array(
        'custom'  =>  array(
          'username_not_taken', 
          'error', 
          'This user name is already taken!'
        ),
      ));

      or

      $obj->set_rule(array(
        'custom'  =>  array(
          'email', 
          'error', 
          'This email address was already used!'
        ),
      ));

      and finally, at the “url” set in the AJAX object, I have something like:

      <?php
      
      require 'path/to/validation.php';
      
      if (
        // make sure it's an AJAX request
        isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
        // make sure it has a referer
        isset($_SERVER['HTTP_REFERER']) &&
        // make sure it comes from your website
        strpos(
          $_SERVER['HTTP_REFERER'], 
          'your/website/base/url'
        ) === 0
      
      ) {
      
        if (
      
          (
            isset($_POST['username']) && 
            username_not_taken($_POST['username'])
          ) 
      
          ||
        
          (
            isset($_POST['email']) && 
            emailaddress_not_taken($_POST['email'])
          )
      
        ) echo 'valid';
      
      } else {
      
        // maybe redirect to a 404 but doesn't really 
        // matter as benevolent users will not access 
        // this page directly
      
      }
      
      ?>

      2. if the form validation is ok, values in $_POST are checked for common XSS attacks but not for MySQL injections; to see what is being done look intro the includes/XSSClean.php file. you should ALWAYS use mysql_real_escape_string on any user-provided data

      3. I’ve added you request for the password power checker to my TODO list but it is not a priority.

      4. I will consider integrating reCAPTCHA as an alternate CAPTCHA. I’ve added this to my TODO list with a higher priority as I think it is useful for many people.

      5. textareas are “upgraded” to WYSWYG controls by CKEditor by a simple line in JavaScript – there’s no need for any change in Zebra_Form for that.

      thanks a lot for taking the time to write!

  • Antonio, 2012-03-06, 12:34

    Shouldn’t posted values atomatically be trimmed? If not done in the form library, at least in your database library.

    Antonio

    Reply
    • Stefan Gabos, 2012-03-06, 18:23

      no. i don’t think is a good idea to temper user input in any way – unless, of course, the input is malicious. if your app requires values to be trimmed, then just trim them in the $form->validate() {} section

  • Dimitri, 2012-03-06, 21:47

    Hi Stefan
    Thank u so much for this great dev.
    I’m trying to use the file upload feature but i have always the same errors :

    Warning: finfo_open() expects parameter 1 to be long, string given in /home/www/.../zebra_form/Zebra_Form.php on line 3031
    Warning: finfo_file(): supplied argument is not a valid file_info resource in /home/www/.../zebra_form/Zebra_Form.php on line 3032
    Warning: finfo_close(): supplied argument is not a valid file_info resource in /home/www/.../zebra_form/Zebra_Form.php on line 3033

    What’s wrong ?

    Reply
    • Stefan Gabos, 2012-03-09, 21:38

      Hello Dimitri,
      What version of Zebra_Form are you using? What version of PHP? Can you please describe the steps that you take in order to get to this error?

    • Dimitri, 2012-03-11, 11:25

      Zebra_form : last release 2.8,
      PHP Version 5.3.10
      I do something like this :

      add('file', 'file');
      
      $obj->set_rule(array(
      
        'required'  =>  array('error', 'File is required!'),
      
        'upload'    =>  array(
          // the path to upload the file to
          'path/to/upload/the/file/to',
          // use random names for files
          ZEBRA_FORM_UPLOAD_RANDOM_NAMES,
          'error',
          'Could not upload file!',
        ),
      
        'filesize' => array(
          // maximum allowed file size (in bytes)
          '102400',
          'error',
          'File size must not exceed 100Kb!'
        ),
      
        'filetype' =>  array(
          //allowed file types
          'xls, xlsx',
          'error',
          'File must be a valid Excel file!'
        ),
      
      ));
      ?>

      strangely, the script works fine width the ‘image’ rule but but not width the ‘filetype’ rule.
      Thanks a lot,
      Dimitri

    • Stefan Gabos, 2012-03-11, 20:25

      I’m sorry Dimitri, I cannot reproduce the bug. I’ve installed PHP 5.3.1, spent 30 minutes trying to figure out why nothing is working – apparently you cannot use “localhost” when using the file() function but instead you have to use 127.0.0.1, tried to upload all sorts of files without the error you’re talking about…

      Please email me the code you are using and the file that you are trying to upload when you get this error.

      Thanks!

    • Dimitri, 2012-03-13, 15:44

      Thanks for the time you’ve spent on my problem.
      I migrate my project from the development server to the production server and the upload script width the ‘filetype’ rule works perfectly now.
      The problem may be due to a server specificity.
      I migrate the site from infomaniak to OVH.
      Best regards, Dimitri

  • Andy Vogar, 2012-03-09, 22:26

    I have created a basic message board and have used the following to create a text area and filter what a user can input, however I would like to let the user use the enter key to get a new line in the text area but cannot seem too work out how to change the field validation to allow this??
    The code I am using is:
    $obj->set_rule(array('required' => array('error', 'Message is required!'),
    'alphanumeric' => array(' -.,;:?','error','Only letters , numbers and - .,;:? characters allowed!'),
    'length' => array(2,1000,'error','Value must have between 2 and 1000 characters!')));

    Regards
    Andy

    Reply
    • Stefan Gabos, 2012-03-11, 20:52

      Andy, I couldn’t reproduce it. I’ve tested it on Firefox 11. What browser are you using and what version of Zebra_Form?

    • Andy Vogar, 2012-03-13, 21:43

      I am using the latest version of google chrome and have tried it in other browsers. The issue is that whilst I can user the enter key in the text box to get newlines, when I submit it it fails the validation because of the enter key marker in the text.
      I have just installed the latest version of Zebra forms and it get the same result.
      Also have tried adding the extra condition to the length statement but the counter does not show? (made sure that the css file was the latest one but still no counter displaying?)

  • Dmitry, 2012-03-10, 15:43

    Hi Stefan.
    I have a little question, how i can set array in hidden type field, is it possible?
    Best regards, Dmitry.

    Reply
  • Arlandi, 2012-03-14, 07:20

    Hi Stefan.
    is there a way to display checkboxes to the side instead of on a new line?
    i’m guessing it’s through CSS, but i can’t find which class to modify.

    Thanks!

    Reply
    • Stefan Gabos, 2012-03-14, 10:31

      look in the demos and see how the templates are built.
      basically is

      <div class="row">
          <div class="cell"><?php echo $the_checkbox?></div>
          <div class="cell"><?php echo $the_label?></div>
          <div class="clear"></div>
      </div>
  • Andy Vogar, 2012-03-16, 00:05

    I have found that in the latest version of Zebra Forms if you set the length statement as follows:
    ('length' => array(2,200,'error','Message must have between 2 and 200 characters',true)
    This will NOT show the counter.

    To get the counter to show you have to set the min value to 0 which then defeats the point of having a min value requirement?

    Reply
    • Stefan Gabos, 2012-03-16, 21:10

      that’s correct. i felt like showing the counter would only make sense if first argument is 0… do you feel this behavior should be changed?

    • Andy Vogar, 2012-03-19, 23:59

      As the counter is attached to the length statement, I would suspect that if this rule is being used it is to ensure that a user enters at least 1 character in to the form so was surprised to find it set to 0

    • Stefan Gabos, 2012-03-20, 05:38

      not really. the length rule is also used to ensure that the user doesn’t enter more than a predefined number of characters; not to mention that length rule doesn’t require that a user enters a character at all, if set to something like (0, 10); nevertheless, it’s no big deal to force the counter for any situation so I’ll change that for the next release :)

  • saj, 2012-03-17, 05:18

    Hi,

    Zebra form are not working with IE 9 and upper versions?

    Its not showing errors.

    Please help me out

    from,
    Saj

    Reply
  • gnummer, 2012-03-17, 11:40

    Hi there, first thank you so much for these scripts, I have few questions:
    + It is possible to integrate the availibity options for name ?
    + Store the submitted infos into a DB ?

    Regards
    Gnu_nix

    Reply
  • Martín, 2012-03-19, 21:05

    Hi Stefan,

    I’m using your library for a personal microframework and I want to make a suggestion:

    I think that is better if we could configure how to show the javascript validation…

    +show all errors (like the validation server side)
    +show one by one (like the validation client)

    Great Job Stefan! Thanks!

    Reply
    • Stefan Gabos, 2012-03-20, 05:29

      noted. thanks!

  • Alejandro, 2012-03-24, 17:40

    Hello Stefan,

    First, congratulations on your libraries and your excellent work. I am developing a web application and am using Zebra_Form. I think I’ve found a bug when trying to add a input type “button” in my forms.

    The output code generated by the library include instead of (as class attribute gets class=”button”, that’s OK).

    A greeting and thank you very much.

    Alejandro

    Reply
    • Stefan Gabos, 2012-03-28, 06:43

      can you please repost the code or send it to me in an email pleas? thanks!

  • Edward, 2012-03-28, 01:51

    Do you know of any conflicts with jquery UI? I’m having a problem with the file input. It displays fine, but as soon as I select a file, the text input box and the browse button disappear. I’ve traced it back to the jquery-ui.js file. If I don’t load that file, then the file input works properly. The next step is to see whether I can figure out exactly what the conflict is and try to resolve it, but I thought I’d check to see whether anyone knew anything about this. Thanks much.

    Reply
    • Edward, 2012-03-28, 17:36

      Just to clarify, I know the file upload box and browse button are supposed to disappear when a file is selected, but they should get replaced by the name of the file and a remove link. Those do not appear. A javascript error it thrown: “this.each is not a function” and points to a line in the jquery-ui javascript file. The offending line is in the jquery UI core so it’s not something I can simply remove. I really like what you have here so I’m hoping I can get this worked out.

    • Stefan Gabos, 2012-03-28, 17:44

      sorry Edward, I’ve never used jQuery UI; all I can promise is that I’ll have a look when I have the time

    • Edward, 2012-03-28, 22:39

      Thanks for the reply. I think I have it figured out. In zebra_form.src.js (the non-minified source file) on line 500, you are setting the width of the new filename div that replaces the file upload box to $element.outerWidth. That is a function so I just replaced it with $element.outerWidth() and it’s working now.

      I took one of your example files and added a file upload to test and even though it looked to be working with no errors, the width of that div was apparently not being set properly because I could click just to the right of the filename div and get the open file dialog box again. The reason why I was getting the javascript error and you weren’t is that the outerWidth function is being defined in the jquery UI javascript file, so an error was thrown and the filename div never appears. Anyway, putting the () in makes it work and the filename div is wide enough so you can’t click behind it. I’m happy. I like your work.

    • Stefan Gabos, 2012-03-29, 06:33

      thanks for finding and fixing it! it was a bug on my end after all :)

Leave a Reply

Your email address will not be published
You can use <strong>, <em>, <a>, <img>, <code>
Characters are not case-sensitive