Object-oriented form rendering using PHP, part 3

Back to a couple of posts that date back to ages ago:
Object-oriented form rendering using PHP, part 1
Object-oriented form rendering using PHP, part 2

Basically, I had said at the time I would be redesigning lots of the code. Which is now done! Just one update compared to what was previously said, the client-side rules are added to the onsubmit event of the form.

And this is the result from the server perspective (login form):

$login_form=new HTML_Form('login',$_SERVER['PHP_SELF'], 'POST', 'login');

// identifier
$f_identifier=new Text('identifier', 'identifier', '', 15, 15);
$f_identifier->setLabel(Toolkit::get_lang('identifier'));
$f_identifier->addOnSubmitRule('trim');
$f_identifier->addOnSubmitRule('required', 'This field is required');
$login_form->add($f_identifier);

// password
$f_password=new Password('password', 'password', '', 15, 15);
$f_password->setLabel(Toolkit::get_lang('password'));
$f_password->addOnSubmitRule('required', 'This field is required');
$login_form->add($f_password);

// secure form
$login_form->secure();

// submit button
$submit=new Submit();
$login_form->add($submit);

// display form
$login_form->display();

if ($login_form->validate())
{
// handle POST information, etc.
}


First I create an HTML_Form object to which I can add form elements like Text or Password objects. I can add rules to my form elements using the addOnSubmitRule method.

This is the resulting form:

<form action="/stardust/zencity/main/home.php" method="POST" id="login" name="login" onSubmit="reset_errors(); var ret=true;ret&=trim('identifier');ret&=required('identifier','This field is required');ret&=required('password','This field is required');if (!ret) return false;">

<label for="identifier">identifier* : </label>
<input id="identifier" name="identifier" type="text" size="15" maxlength="15"/>
<span id='error_identifier' name='error_identifier'></span><br/>

<label for="password">password* : </label>
<input id="password" name="password" type="password" size="15" maxlength="15"/>
<span id='error_password' name='error_password'></span><br/>

<input id="seckey" name="seckey" type="hidden" value="BcfaGvQEpqvJujGv90nz6P10zEBqgOBUp9X3J0aXrebdf9tUoD1DA1hv28e5tlkv"/><br/>

<input type="submit" value="ok"/><br/>

</form>


The validate() method then checks the form (e.g. makes sure it has been submitted with the correct security key).
Some of the goodies are:
- the required fields' labels are automatically appended with * sign;
- the calls to JS code are automatically generated and most of the checking happens on the client-side, to help avoid server overload for simple rules (like trim, minimum length requirements, email validity, etc.);
- error zones are automatically created, these are used by the Javascript code to show error messages when the client-side rules are not met (e.g. required field empty);
- you can seamlessly add to the code behind all this: new rules, new types of elements (for instance, I have designed a small captcha - which still needs tuning mind you - which I can create with: new Captcha('captcha', 'captcha'), and then add to form using the usual add() method; simple as that).

Well, hopefully more on this project soon to explain what's actually happening behind the scenes.

Object-oriented form rendering using PHP, part 2

There is one fundamental problem with my previous analysis of automatic form generation (using PHP).

// in the page header
$form->displayJS();
// ... lots of useful stuff
// in the page body
$form->display();
// ... other useful stuff

Which is: displaying the JS in the header is a really cool idea in a world where all forms are created on full HTML pages: with html, head, body tags. The truth of the matter is though that you often, probably mostly, work with PHP 'chunks' which you then include in the higher level page.

For instance, I am currently working on a login form which I would like to appear on several different pages. Displaying JS in the header using the displayJS() function becomes impossible because the include (using require_once, include, ...) happens when you are already in the 'body' of the resulting page.

<html>
<head>
<title>An example</title>
</head>
<body>
<?php require_once('login/login.php'); ?>
</body>
</html>

So, onto plan B. I have now changed my original idea to a more lightweight technique. On each 'input' you declare, you can add one or more client-side 'rules' which will take effect when the onchange event occurs (i.e. whenever the user validates input for the field). In other terms, whenever the user enters information into the field, it's trimmed, etc. using Javascript.
Once the form gets submitted, the onsubmit event triggered by the browser, will only make sure required fields are present, required being also used in the sense non-empty.

Right, so that's the theory. All it needs now is putting into practice.

Thoughts?

Object-oriented form rendering using PHP, part 1

Well, hi again.

I have had to major annoyances these past two weeks:
- clearing my flat (those who know me well, know this is a endless task);
- and studying for a Dutch exam, which is today! So, there is lots of touching wood going on around here.

[UPDATE: the exam wasn't that difficult. I think I have made it to the next module. Actual results next Wednesday!]

The good news is I actually found my IT diploma certificate!

Other than that, I have continued my personal website, and also started working on anxcity, which I have already renamed zencity because we really want to focus on the aim rather than the "problem".

I know I shall be needing quite a few forms (especially for administration), so I have started developing a form publisher using object oriented PHP. The form and input nodes are ready, but I hope to be adding client-side and server-side rules shortly.

The general idea is (I haven't checked syntax so bare with me):

$form=new Form();
$name=new Text('name',40); // 40 is the size
$comment=new TextArea('comment',4,5);
$form->add($name);
$form->add($comment);
$form->display();

And of course ultimately:

// in the HTML head or before
$form=new Form();
$name=new Text('name',40); // 40 is the size
$name->addPreSubmitJS('trim');
$name->addOnSubmitJS('min-length',0);
$comment=new TextArea('comment',4,5);
$comment->addPreSubmitJS('trim');
$comment->addOnSubmitJS('min-length',0);
...
...
$form->add($name);
$form->add($comment);

// in the HTML head
$form->displayJS();

// in the HTML body
$form->display();

// once the form is actually submitted to server,
// apply server side rules

There are thus to separate types of rules:
- JS client-side rules (the usual: trim(), length()>0, etc.) that get tested before the HTTP request actually gets (or doesn't get) sent.
- PHP server-side rules (non-duplicate identifier, etc.) tested on the server-side once the HTTP request gets through.

Anyhow, once the personal website is up I shall be able to share more with you about the evolution of the project.

Any thoughts for now?