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

More validation rules

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');

    // "alphabet"
    $form->add('label', 'label_alphabet', 'alphabet', 'Alphabet:');

    $obj = $form->add('text', 'alphabet');

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

        // error messages will be sent to a variable called "error", usable in custom templates
        'required'  => array('error', 'This field is required!'),
        'alphabet'  => array('', 'error', 'Accepts only characters from the alphabet (case-insensitive a to z)')

    ));

    // attach a note
    $form->add('note', 'note_alphabet', 'alphabet', 'Accepts only characters from the alphabet (case-insensitive a to z)');

    // "alphanumeric"
    $form->add('label', 'label_alphanumeric', 'alphanumeric', 'Alphanumeric:');
    $obj = $form->add('text', 'alphanumeric');
    $obj->set_rule(array(
        'required'      => array('error', 'This field is required!'),
        'alphanumeric'  => array('', 'error', 'Accepts only characters from the alphabet (case-insensitive a to z) and digits (0 to 9)')
    ));
    $form->add('note', 'note_alphanumeric', 'alphanumeric', 'Accepts only characters from the alphabet (case-insensitive a to z) and digits (0 to 9)');

    // "digits"
    $form->add('label', 'label_digits', 'digits', 'Digits:');
    $obj = $form->add('text', 'digits');
    $obj->set_rule(array(
        'required'  => array('error', 'This field is required!'),
        'digits'    => array('', 'error', 'Accepts only digits (0 to 9)')
    ));
    $form->add('note', 'note_digits', 'digits', 'Accepts only digits (0 to 9)');

    // "float"
    $form->add('label', 'label_float', 'float', 'Float:');
    $obj = $form->add('text', 'float');
    $obj->set_rule(array(
        'required'  => array('error', 'This field is required!'),
        'float'     => array('', 'error', 'Accepts only digits (0 to 9) and/or one dot (but not as the very first character) and/or one minus sign (but only if it is the very first character)')
    ));
    $form->add('note', 'note_float', 'float', 'Accepts only digits (0 to 9) and/or one dot (but not as the very first character) and/or one minus sign (but only if it is the very first character)');

    // "length"
    $form->add('label', 'label_length', 'length', 'Length:');
    $obj = $form->add('text', 'length');
    $obj->set_rule(array(
        'required'  => array('error', 'This field is required!'),
        'length'    => array(6, 12, 'error', 'Must contain between 6 and 12 characters!')
    ));
    $form->add('note', 'note_length', 'length', 'Must contain between 6 and 12 characters');

    // "number"
    $form->add('label', 'label_number', 'number', 'Number:');
    $obj = $form->add('text', 'number');
    $obj->set_rule(array(
        'required'  => array('error', 'This field is required!'),
        'number'    => array('', 'error', 'Accepts only digits (0 to 9) and/or one minus sign (but only if it is the very first character)')
    ));
    $form->add('note', 'note_number', 'number', 'Accepts only digits (0 to 9) and/or one minus sign (but only if it is the very first character)');

    // "regular expression"
    $form->add('label', 'label_regexp', 'regexp', 'Regular expression:');
    $obj = $form->add('text', 'regexp');
    $obj->set_rule(array(
        'required'  => array('error', 'This field is required!'),
        'regexp'    => array('^07[0-9]{8}$', 'error', 'Validates only if the value matches the following regular expression: ^07[0-9]{8}$')
    ));
    $form->add('note', 'note_regexp', 'regexp', 'Validates if the value satisfies the following regular expression: ^07[0-9]{8}$');

    // "change case"
    $form->add('label', 'label_case', 'case', 'Change case:');
    $obj = $form->add('text', 'case');
    $obj->set_rule(array(
        'required'  => array('error', 'This field is required!'),
    ));
    // force all characters to be upper-case
    $obj->change_case('upper');
    $form->add('note', 'note_case', 'case', 'All entered characters will be upper-case');

    // "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();

?>

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

<!-- 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>