Zebra_Form, a PHP class for generating and validating HTML forms

A login form

Notice how the PHP code for the form remains basically unchanged, despite the template variations.

try clicking on the submit button without filling the form and then, as you fill the form, to see the JavaScript validation in action;
disable JavaScript to see the server-side validation in action
although in all my examples I use HTML 4.01 Strict, you can switch to XHTML output by using the doctye method;
try the example in another browser and see that it works, out of the box. including IE6!

<?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', array('style' => 'font-weight:normal'));

    // "submit"
    $form->add('submit', 'btnsubmit', 'Submit');
    
    // validate the form
    if ($form->validate()) {

        // do stuff here

    }

    // auto generate output, labels above form elements
    $form->render();

?>

In this example, the output is automatically generated by Zebra_Form's render method.

<!-- 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 content from the "PHP Source" tab goes here -->

    </body>

</html>

This is the HTML markup generated by Zebra_Form. Can be used as reference for creating custom templates.

<form name="form" id="form" action="path/to/action" method="post" class="Zebra_Form">
<div class="hidden">
    <input type="hidden" name="name_form" id="name_form" value="form">
    <input type="hidden" name="timer_form" id="timer_form" value="PE0ZmOcmEm90">
    <input type="text" name="response_form" id="response_form" value="" class="control text" autocomplete="off">
</div>
<div class="row">
    <label for="email" id="label_email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" value="" class="control text validate[required,email]" autocomplete="off">
</div>
<div class="row even">
    <label for="password" id="label_password">Password<span class="required">*</span></label>
    <input type="password" name="password" id="password" value="" class="control password validate[required,length(6,10)]" autocomplete="off" maxlength="10">
</div>
<div class="row">
    <div class="cell">
        <input type="checkbox" name="remember_me" id="remember_me_yes" value="yes" class="control checkbox">
    </div>
    <div class="cell">
        <label for="remember_me_yes" id="label_remember_me_yes">Remember me</label>
    </div>
    <div class="clear"></div>
</div>
<div class="row even last">
    <input type="submit" name="btnsubmit" id="btnsubmit" value="Submit" class="submit">
</div>
</form>
<script type="text/javascript">
function init_da2751e777dcf7695c6d7f593c668d59() {
    if (typeof jQuery == "undefined" || typeof jQuery.fn.Zebra_Form == "undefined") {
        setTimeout("init_da2751e777dcf7695c6d7f593c668d59()", 100);
        return
    }
    $("#form").Zebra_Form({
        error_messages: {
            "email": {
                "required": "Email is required!",
                "email": "Email address seems to be invalid!"
            },
            "password": {
                "required": "Password is required!",
                "length": "The password must have between 6 and 10 characters"
            }
        }
    })
}
init_da2751e777dcf7695c6d7f593c668d59()
</script>