Dependencies

Showcasing how elements can be validated only if other elements meet certain conditions and how callback functions for the "dependencies" rule work.

Leave this field blank

Your name*

Would you like to be informed about promotional offers?*

Yes

Please specify how you would like to be notified about promotional offers:*

By e-mail

Your email address:*

Your email address will not be published.

By phone

Your telephone number:*

Enter your phone number using digits only

By land mail

Your postal address:*

Enter the address where the notifications about promotional offers should be delivered

No

Please tell us why:*

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

    // add the "name" element
    $form->add('label', 'label_name', 'name', 'Your name');
    $obj = $form->add('text', 'name');

    // set rules
    $obj->set_rule(array(
        'required'  => array('error', 'Name is required!'),
    ));

    // "notifications"
    $form->add('label', 'label_notifications', 'notifications', 'Would you like to be informed about promotional offers?');
    $obj = $form->add('radios', 'notifications', array(
        'yes'   =>  'Yes',
        'no'    =>  'No',
    ));
    $obj->set_rule(array(
        'required'  =>  array('error', 'Please select an answer!'),
    ));

    // "method"
    $form->add('label', 'label_method', 'method', 'Please specify how you would like to be notified about promotional offers:');
    $obj = $form->add('checkboxes', 'method[]', array(
        'email' =>  'By e-mail',
        'phone' =>  'By phone',
        'post'  =>  'By land mail',
    ));
    $obj->set_rule(array(
        'required'  =>  array('error', 'Please specify how you would like to be notified about promotional offers!'),
        'dependencies'   =>  array(array(
            'notifications' =>  'yes',
        // whenever the value of "notification" changes, call this function and pass as second argument the value "1"
        ), 'mycallback, 1'),
    ));

    // "email"
    $form->add('label', 'label_email', 'email', 'Your 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!'),
        'dependencies'   =>  array(array(
            'method'        =>  'email',
        ), 'mycallback, 2'),
    ));
    $form->add('note', 'note_email', 'email', 'Your email address will not be published.');

    // "phone"
    $form->add('label', 'label_phone', 'phone', 'Your telephone number:');
    $obj = $form->add('text', 'phone');
    $obj->set_rule(array(
        'required'  =>  array('error', 'Phone number is required!'),
        'digits'    =>  array('', 'error', 'Phone number must contain only digits!'),
        'dependencies'   =>  array(array(
            'method'    =>  'phone',
        ), 'mycallback, 3'),
    ));
    $form->add('note', 'note_phone', 'phone', 'Enter your phone number using digits only');

    // "post"
    $form->add('label', 'label_post', 'post', 'Your postal address:');
    $obj = $form->add('text', 'post');
    $obj->set_rule(array(
        'required'  =>  array('error', 'Postal address is required!'),
        'dependencies'   =>  array(array(
            'method'    =>  'post',
        ), 'mycallback, 4'),
    ));
    $form->add('note', 'note_post', 'post', 'Enter the address where the notifications about promotional offers should be delivered');

    // "why"
    $form->add('label', 'label_why', 'why', 'Please tell us why:');
    $obj = $form->add('textarea', 'why');
    $obj->set_rule(array(
        'required'  =>  array('error', 'Please leave us a message!'),
        'dependencies'   =>  array(array(
            'notifications' =>  'no',
        ), 'mycallback, 5'),
    ));

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

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

        // show results
        show_results();

    // otherwise
    } else

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

?>

<!--
    in reality you'd have this in an external stylesheet;
    i am using it like this for the sake of the example
-->
<style type="text/css">
    .Zebra_Form .optional { padding: 10px 50px; display: none }
</style>

<!--
    again, in reality you'd have this in an external JavaScript file;
    i am using it like this for the sake of the example
-->
<script type="text/javascript">
    var mycallback = function(value, segment) {
        $segment = $('.optional' + segment);
        if (value) $segment.show();
        else $segment.hide();
    }
</script>

<?php echo (isset($zf_error) ? $zf_error : (isset($error) ? $error : ''))?>

<div class="row">
    <?php echo $label_name . $name?>
</div>

<div class="row">

    <?php echo $label_notifications?>
    <div class="cell"><?php echo $notifications_yes?></div>
    <div class="cell"><?php echo $label_notifications_yes?></div>
    <div class="clear"></div>

    <div class="optional optional1">

        <?php echo $label_method?>
        <div class="cell"><?php echo $method_email?></div>
        <div class="cell"><?php echo $label_method_email?></div>
        <div class="clear"></div>

        <div class="optional optional2">
            <?php echo $label_email . $email . $note_email?>
        </div>

        <div class="cell"><?php echo $method_phone?></div>
        <div class="cell"><?php echo $label_method_phone?></div>
        <div class="clear"></div>

        <div class="optional optional3">
            <?php echo $label_phone . $phone . $note_phone?>
        </div>

        <div class="cell"><?php echo $method_post?></div>
        <div class="cell"><?php echo $label_method_post?></div>
        <div class="clear"></div>

        <div class="optional optional4">
            <?php echo $label_post . $post . $note_post?>
        </div>

    </div>

    <div class="cell"><?php echo $notifications_no?></div>
    <div class="cell"><?php echo $label_notifications_no?></div>
    <div class="clear"></div>

    <div class="optional optional5">
        <?php echo $label_why . $why?>
    </div>

</div>

<div class="row 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>