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.