Zebra_Form, a jQuery augmented PHP library for HTML form building and validation

A registration form

Check the "Template source" tab to see how it's done!

try clicking on the submit button without filling the form and then, as you fill the form, to see the JavaScript validation in action
for each example, notice how the PHP code of the form remains basically unchanged, despite the template variations
disable JavaScript to see the server-side validation in action
although in all my examples I use HTML output, 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', 'post', '', array('autocomplete' => 'off'));

    // the label for the "first name" element
    $form->add('label', 'label_firstname', 'firstname', 'First name:');

    // add the "first name" element
    $obj = $form->add('text', 'firstname');

    // set rules
    $obj->set_rule(array(

        // error messages will be sent to a variable called "error", usable in custom templates
        'required'  =>  array('error', 'First name is required!'),

    ));

    // "last name"
    $form->add('label', 'label_lastname', 'lastname', 'Last name:');
    $obj = $form->add('text', 'lastname');
    $obj->set_rule(array(
        'required' => array('error', 'Last name is required!')
    ));

    // "email"
    $form->add('label', 'label_email', 'email', 'Email address:');
    $obj = $form->add('text', 'email');
    $obj->set_rule(array(
        'required'  => array('error', 'Email is required!'),
        'email'     => array('error', 'Email address seems to be invalid!')
    ));

    // attach a note to the email element
    $form->add('note', 'note_email', 'email', 'Please enter a valid email address. An email will be sent to this
    address with a link you need to click on in order to activate your account', array('style'=>'width:200px'));

    // "password"
    $form->add('label', 'label_password', 'password', 'Choose a password:');
    $obj = $form->add('password', 'password');
    $obj->set_rule(array(
        'required'  => array('error', 'Password is required!'),
        'length'    => array(6, 10, 'error', 'The password must have between 6 and 10 characters'),
    ));
    $form->add('note', 'note_password', 'password', 'Password must be have between 6 and 10 characters.', array('style' => 'width: 180px'));

    // "confirm password"
    $form->add('label', 'label_confirm_password', 'confirm_password', 'Confirm password:');
    $obj = $form->add('password', 'confirm_password');
    $obj->set_rule(array(
        'compare' => array('password', 'error', 'Password not confirmed correctly!')
    ));

    // "captcha"
    $form->add('captcha', 'captcha_image', 'captcha_code');
    $form->add('label', 'label_captcha_code', 'captcha_code', 'Are you human?');
    $obj = $form->add('text', 'captcha_code');
    $form->add('note', 'note_captcha', 'captcha_code', 'You must enter the characters with black color that stand
    out from the other characters', array('style'=>'width: 200px'));
    $obj->set_rule(array(
      'required'  => array('error', 'Enter the characters from the image above!'),
      'captcha' => array('error', 'Characters from image entered incorrectly!')
    ));

    // "submit"
    $form->add('submit', 'btnsubmit', 'Submit');

    // if the form is valid
    if ($form->validate()) {

        // show results
        show_results();

    // otherwise
    } else

        // generate output using a custom template
        $form->render('path/to/custom-template.php');

?>

<?php
    // don't forget about this for custom templates, or errors will not show for server-side validation
    // $zf_error is automatically created by the library and it holds messages about SPAM or CSRF errors
    // $error is the name of the variable used with the set_rule method
    echo (isset($zf_error) ? $zf_error : (isset($error) ? $error : ''));
?>

<!-- elements are grouped in "rows" -->
<div class="row">

    <!-- things that need to be side-by-side go in "cells" and will be floated to the left -->
    <div class="cell"><?php echo $label_firstname . $firstname?></div>
    <div class="cell"><?php echo $label_lastname . $lastname?></div>

</div>

<!-- notice the "even" class which is used to highlight even rows differently
from the odd rows -->
<div class="row even"><?php echo $label_email . $email . $note_email?></div>

<div class="row">
    <div class="cell"><?php echo $label_password . $password . $note_password?></div>
    <div class="cell"><?php echo $label_confirm_password . $confirm_password?></div>
</div>

<div class="row even">
    <?php echo $captcha_image . $label_captcha_code . $captcha_code . $note_captcha?>
</div>

<!-- the submit button goes in the last row; also, notice the "last" class which
removes the bottom border which is otherwise present for any row -->
<div class="row even last"><?php echo $btnsubmit?></div>

<!-- must be in strict mode! -->
<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Zebra_Form Example</title>

        <!-- load Zebra_Form's stylesheet file -->
        <link rel="stylesheet" href="path/to/zebra_form.css">

    </head>

    <body>

        <!--

            the content from the "PHP Source" tab goes here

        -->

        <!-- we're loading the JavaScript files at the bottom of the page so we don't delay page rendering -->

        <!-- try to load jQuery from CDN server and fallback to local source if not available -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="path/to/jquery-1.9.1.min.js"><\/script>')</script>

        <!-- load Zebra_Form's JavaScript file -->
        <script src="path/to/zebra_form.js"></script>

    </body>

</html>