The following is an example of some code which switches the normal client-side error handling of HTML_QuickForm, which uses an alert to show errors, to using DHTML to display errors with their fields and show which fields have problems. This code also runs client-side validation when an element's value is changed or when an element loses focus. There are only 2 changes you need make to your code to make this work. The first is to use the HTML_QuickForm_DHTMLRules class instead of the HTML_QuickForm class. The second change you need only make if you wish the rules to be run when values are changed or focus is lost. You need only call getValidationScript() on your form before it is displayed for this to work. The normal "onSubmit" validation will still be altered without this.

This code also has an example of the SoftRequire rule which can warn a user that a field should be filled out but may be submitted without a value.

*Email
*Required Text
Soft Required Text
*Required Select
* denotes required field
See the old-style client validation for comparison.

This code is released under the LGPL.
HTML_QuickForm_DHTMLRules
HTML_QuickForm_Rule_SoftRequired

<?php
ini_set
('include_path''/home/papercrane/include:/home/papercrane/lib/php:'.ini_get('include_path'));
require_once(
'HTML/QuickForm/DHTMLRules.php');
require_once(
'HTML/QuickForm/Rule/SoftRequired.php');

echo 
'
<p>
The following is an example of some code which switches the normal client-side error handling of HTML_QuickForm, which uses an alert to show errors, to using DHTML to display errors with their fields and show which fields have problems. This code also runs client-side validation when an element\'s value is changed or when an element loses focus. There are only 2 changes you need make to your code to make this work. The first is to use the HTML_QuickForm_DHTMLRules class instead of the HTML_QuickForm class. The second change you need only make if you wish the rules to be run when values are changed or focus is lost. You need only call getValidationScript() on your form before it is displayed for this to work. The normal "onSubmit" validation will still be altered without this.
</p>
<p>
This code also has an example of the SoftRequire rule which can warn a user that a field <b>should</b> be filled out but may be submitted without a value.
</p>'
;

if (isset(
$_REQUEST['oldStyle'])) {
    
$f = new HTML_QuickForm();
} else {
    
$f = new HTML_QuickForm_DHTMLRules();
}
$f->addElement('text''email''Email');
$f->addElement('text''rtext''Required Text');
$f->addElement('text''srtext''Soft Required Text');
$f->addElement('select''rselect''Required Select', array('' => '''Option 1''Option 2'));
$f->addElement('submit''submit''Submit');

$f->addRule('email''Enter an e-mail address''email'null'client');
$f->addRule('email''This field is required''required'null'client');
$f->addRule('rtext''This field is required''required'null'client');
$f->addRule('rselect''This field is required''required'null'client');
$f->addRule('srtext''Are you sure you want don\'t want to fill this in?''softRequired'null'client');

echo 
'
<style type="text/css">
form table {
  border-collapse: collapse;
}
form table td {
  margin: 0px;
  padding: 5px;
}
tr.error, tr.error td {
  background-color: #FFCFCF;
}
div.error {
  font-weight: bold;
}
</style>
'
;
if (
$f->validate()) {
    echo 
'<h3>Validated</h3>';
}
$f->display();

if (isset(
$_REQUEST['oldStyle'])) {
    echo 
'
<a href="?">Enough of this, I want DHTML back!</a><br/>'
;
} else {
    echo 
'
<a href="?oldStyle=1">See the old-style client validation for comparison.</a><br/>'
;
}
echo 
'
<br/>
This code is released under the LGPL.<br/>
<a href="HTML/QuickForm/DHTMLRules.phps">HTML_QuickForm_DHTMLRules</a><br/>
<a href="SoftRequired.phps">HTML_QuickForm_Rule_SoftRequired</a><br/><br/>'
;

highlight_file(__FILE__);

?>