jQuickForm = PHP Form Generator (big update)

A few days have passed since the publication of the announcement of the birth of jQuickForm (if in a nutshell, jQuickForm is an assembly of jQuery + HTML_QuickForm2).
A lot of positive feedback was received, incl. lichku, many visitors to the project site said "LikeIt", and this suggests that the work is necessary and timely.
So, today I want to say that at the moment almost all the obvious and hidden features of jQuickForm are described, and this is neither more nor less:

Items

InputText , InputPassword , Date (choice of date, consisting of several elements of type select), DatePicker (jQueryUI), Slider (jQueryUI - “slider”), SliderRange (jQueryUI - range of values), Select , Buttons , Textarea , Page (item to build multipage wizard), Static (form element for inserting arbitrary HTML), jWysiwyg (simplest editor), Autocomplete One Array (autocomplete with a single value and initialization using an array transfer), Autocomplete One Remote (the same, but the source - AYAX script ), Autocomplete Multiple Array (avtokomplit with a plurality of values separated by a comma is used, for example, is formed Nia list of Web 2.0 label, source - an array), Autocomplete Multiple Remote (same with the remote source), File Upload (normal file upload element), and, at the request of viewers - File MultiUpload

Item grouping

This is generally a song! All form elements are nodes and containers. In fact, the container is also a node, but with the ability to contain other nodes.
The most important thing in HTML_QuickForm2 is that it is possible to add groups to each other with unlimited nesting.
Moreover, adding two elements (first_name, last_name) of type InputText to the group, if you specify the name “group_name” for the group, then these elements automatically get the name “group_name [first_name]” and “group_name [last_name]”, respectively.
If the group name is not added, then the elements can be visually grouped and be on the same line, but have their original names "first_name", "last_name"
')

Validation Rules

Validation rules are clearly divided into server and client, and when setting the rule, you can explicitly indicate where the check should be performed and, if the first version of HTML_QuickForm defaults to server checking, and it was always executed, and the client optionally, then the second version appeared the ability to do only client verification.
Rules out of the box:
“Required field”, “minimum”, “maximum”, “match”, “do not match”, “strictly less”, “not more”, “strictly more”, “not less”, “everyone in the group”. "empty",
"not empty".
In principle, the principle of checking the rule is clear from the title, I would like to separately note the rule “everyone in a group”, it is done in order to specify for a group of elements (a group is a subtype of a container) what kind of checking should be performed with each element.

Form Field Filters

Filters in HTML_QuickForm2 are the ability to automatically bring elements in the desired view, for example:

<?
$element->addFilter( 'trim' );
?>

* This source code was highlighted with Source Code Highlighter .

The name of the function or the method of the filter class is passed as a parameter.
You guessed correctly that in order for the value of the field that comes after POST, regardless of what the user wrote there, be integral, you need to apply a filter

<?
$element->addFilter( 'intval' );
?>

* This source code was highlighted with Source Code Highlighter .

Filtering is limited only by your imagination.

Data sources

Another important question that I missed in the announcement of the form generator and answered in the comments is filling out the form before its first display.
For example, when you receive news for editing, you have an associative array of records.

<?
$form = new jQuickForm( 'simple' );
$fieldset = $form->insertFieldset( ' ' );
$fieldset->insertInputText( 'news_title' )
->setLabel( ' ' )
->setExample( ' ' );

$fieldset->insertTextarea( 'news_text' )
->setLabel( ' ' )
->setCols(50)->setRows(5);

$form->insertInputSubmit( ' ' );

// -
$form->addDataSource(
new HTML_QuickForm2_DataSource_Array(array(
'news_title' => ' №1' ,
'news_text' => " №1" ,
)
));

?>

* This source code was highlighted with Source Code Highlighter .

There are other sources of data that you hardly need in principle, but you can also find examples of their use on the site.

Customizing the appearance of the form

Another of the main features of HTML_QuickForm2 is that the routine work of drawing a form is reduced, typical templates for each element or container of elements are already in the default renderer.
But the most interesting thing is that you can easily block the rendering of any element of the form and the form itself!

There are two methods:
1) with the help of CSS (just adding a few lines to the style file, but you can also change inline-css)
2) by changing a specific element template

Working examples

I was also asked to do something real with forms, in order to understand how it works, I made an example of a simple demotivator (slightly combed the script from Lurka), as well as a massive download of files (files are not saved, processing just imitates everything else).

By the way, when adding a SWF Upload element to a number of form elements, one unpleasant feature emerged that I ask to take into account:
if your apload is not public, but a massive apload most likely no one will give to an unauthorized user, when you send files to the download with a flash drive, then a new session is started for the flash, as it seems completely different, therefore it was implemented the mechanism for transferring the session identifier to the download script so that it is possible to understand who really is uploading the files at the moment.
Well, I leave the implementation of protection against the substitution of the session identifier value on the conscience of your content management system.

JQuickForm integration with some PHP frameworks

We perform initialization:

You can do this at the beginning of the application, for example in /index.php, or in a more correct place, for example in the config file.

<?
//
require( 'vendors/__autoload.php' );

header( 'Content-Type: text/html; charset=utf-8' );
date_default_timezone_set( 'Europe/Moscow' );

//
Jaguar::css()->addCss( '//quickform.css' );

// js- ,
//
Jaguar::js()->addJs( '/js/quickform.js' );
?>

* This source code was highlighted with Source Code Highlighter .

Create a template

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head profile ="http://gmpg.org/xfn/11" >
< title > jQuickForm </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
<? php echo $ jquickform- > css; ? >
<? php echo $ jquickform- > css_inline; ? >
</ head >
< body >
<? php echo $ jquickform- > form; ? >
<? php echo $ jquickform- > js; ? >
<? php echo $ jquickform- > js_inline; ? >
<? php echo $ jquickform- > js_onload; ? >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

Create any shape in the right place.

<?
$form = new jQuickForm( 'simple' );
$fieldset = $form->insertFieldset( ' compare' );
$pass = $fieldset->insertInputText( 'pass' )
->setLabel( '' )
->setComment( ' ' );
$pass->addRuleRequired( " " );

$repass = $fieldset->insertInputText( 'pass' )
->setLabel( ' ' )
->setComment( ' ' );
$repass->addRuleCompareEq( " " , $pass);
$fieldset->insertStatic( '
" " ' );

$captcha= $fieldset->insertInputText( 'captcha' )
->setLabel( 'Captcha' )
->setComment( ' 2+2=?' );
$captcha->addRuleCompareEq( " " , "4" );

$fieldset->insertInputSubmit( 'Post!' , 'save' );
?>

* This source code was highlighted with Source Code Highlighter .

Print the form (example for Zend_Framework)

<?
$jquickform = array(
'css' => Jaguar::css()->getCss(),
'css_inline' => Jaguar::css()->getCssInline(),
'js' => Jaguar::js()->getJs(),
'js_onload' => Jaguar::js()->getJsOnload(),
'js_inline' => Jaguar::js()->getJsInline(),
'form' => $form,
);

Zend_Loader::loadClass( 'Zend_View' );
$view = new Zend_View();
$view->jquickform = $jquickform;

echo $view->render( 'page.php' );
?>

* This source code was highlighted with Source Code Highlighter .

Print form (example for Kohana)

<?
$ this ->template = new View( 'module/page' );
$ this ->template->jquickform->css = Jaguar::css()->getCss();
$ this ->template->jquickform->css_inline = Jaguar::css()->getCssInline();
$ this ->template->jquickform->js = Jaguar::js()->getJs();
$ this ->template->jquickform->js_onload = Jaguar::js()->getJsOnload();
$ this ->template->jquickform->js_inline = Jaguar::js()->getJsInline();
$ this ->template->jquickform->form = $form;
?>

* This source code was highlighted with Source Code Highlighter .

Finally an integration tip!

I was already asked the question - why I did not lay out all the individual libraries, and put everything in a heap as a site.
The answer is that you can download or “stretch” the distribution from SVN right here and now to watch it in work without any customization.
After all, sometimes you lose so much time on launching some kind of new thing, since the author did not take care of a quick start.
In other words, this is a probe.

In order not to carry the “probe” in my working applications, I suggest that you do the following (I’ll tell you in detail in steps to take the advice even beginners could - knowledgeable people can skip):

1) Get the latest version from SVN in any temporary directory on the disk, for example in c: / jquickform.

2) Copy the “vendors” and “js” directories to the root of your site along with the service subversion files! For example, in /home/site.ru/www/vendors/, where /home/site.ru/www/ is the DOCUMENT_ROOT of your project

3) Perform jQuickForm integration with your framework, according to the instructions above.

4) From time to time, do svn update for the vendors and js directories to always have the latest version.

Download jQuickForm

You can pick up jQuickForm for testing from SVN
svn co jquickform.googlecode.com/svn/trunk jquickform
You can download the archive here code.google.com/p/jquickform/downloads/list

Thanks for attention!