Stefan Gabos web developer extraordinaire
Zebra_Form, a jQuery augmented PHP library for creating and validating HTML forms
Get the latest updates on this PHP library via RSS
- 1. Overview
- 2. Features
- 3. Requirements
- 4. Installation
- 5. How to use
- 6. Download
- 7. Documentation
- 8. Changelog
- 9. Comments
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 an integrated cross-site scripting prevention mechanism that automatically strips out potentially malicious code from the submitted data. It also prevents automated SPAM posts, out of the box and without relying on CAPTCHA by using honey pots.
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 AJAX-like file upload controls.
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.
Features review
- has an integrated cross-site scripting prevention mechanism that automatically strips out potentially malicious code from the submitted data
- it automatically prevents automated SPAM posts using the “honey pot” technique
- provides both server-side and client-side validation (client-side validation is done using jQuery 1.5.2+)
- 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
Requirements
PHP 4.2.0+ or 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+
Installation
Download the latest version, unpack it, and put it in a place accessible to your scripts.
How to use
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
// the "&" symbol is there so that $obj will be a reference to the object in PHP 4
// for PHP 5+ there is no need for it
$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();
?>
Download
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:
- Zebra_Database, a MySQL database wrapper written in PHP
- Zebra_Image, a lightweight image manipulation library written in PHP
- Zebra_Mptt, a PHP implementation of the modified preorder tree traversal algorithm
- Zebra_Pagination, a generic pagination class written in PHP
- Zebra_Session, a wrapper for PHP's default session handling functions, using MySQL for storage
Documentation
|
Become a ninja. Read the comprehensive documentation. |
Changelog
Click on a version to expand/collapse information.
- 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;
419 responses to “Zebra_Form, a jQuery augmented PHP library for creating and validating HTML forms”
Follow the comments via RSS
Who am I
I am a 32 year old web developer working from Bucharest, Romania. I am coding since I was 14 and I am extremely passionate about it. For the server side of things I use PHP/MySQL while on the front-end I write valid HTML 5, nice CSS and lots of JavaScript code using jQuery.
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
Reply1. 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)
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
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.
Hi Stefan.
ReplyIs 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 !
I’ve succeeded whith this :
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 ?
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.
ReplyP.
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
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.
ReplyAntonio
regarding 1, the answer is a bit longer. this is how i do it:
in my main JavaScript file I have something like
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:
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:
or
and finally, at the “url” set in the AJAX object, I have something like:
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!
Shouldn’t posted values atomatically be trimmed? If not done in the form library, at least in your database library.
Antonio
Replyno. 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
Hi Stefan
ReplyThank 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 ?
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?
Zebra_form : last release 2.8,
PHP Version 5.3.10
I do something like this :
strangely, the script works fine width the ‘image’ rule but but not width the ‘filetype’ rule.
Thanks a lot,
Dimitri
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!
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
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
ReplyAndy
Andy, I couldn’t reproduce it. I’ve tested it on Firefox 11. What browser are you using and what version of Zebra_Form?
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?)
Hi Stefan.
ReplyI have a little question, how i can set array in hidden type field, is it possible?
Best regards, Dmitry.
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!
Replylook in the demos and see how the templates are built.
basically is
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?
Replythat’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?
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
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
Hi,
Zebra form are not working with IE 9 and upper versions?
Its not showing errors.
Please help me out
from,
ReplySaj
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
ReplyGnu_nix
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!
Replynoted. thanks!
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
Replycan you please repost the code or send it to me in an email pleas? thanks!
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.
ReplyJust 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.
sorry Edward, I’ve never used jQuery UI; all I can promise is that I’ll have a look when I have the time
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.
thanks for finding and fixing it! it was a bug on my end after all