Homepage.default.phtml

{block headcontent}
    {foreach $js as $script}
        <script type="text/javascript" src="{$basePath}/js/{$script}"></script>
    {/foreach}
    {foreach $css as $sheet}
    	<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/{$sheet}" type="text/css">
    {/foreach}    
{/block}

{block content}



<div id="header">

	<h1>Simple form application</h1>



	<h2>Welcome to our page. Please sign up for receiving our monthly newsletter.</h2>

</div>



<div>
    {if count($message)}
    {foreach $message as $m}

    	<p>{$m}</p>
    {/foreach}
	{/if}
	{widget MyForm}
</div>

<style>

	body {

		margin: 0;

		padding: 0;

	}



	div {

		padding: .2em 1em;

	}



	#header {

		background: #EEE;

		border-bottom: 1px #DDD solid;

	}



	h1 {

		color: #0056ad;

		font-size: 30px;

	}



	h2 {

		color: gray;

		font-size: 20px;

	}
	
	#myform {
	  padding-top: 10px;
	}

</style>
<script type="text/javascript">
// <![CDATA[
  $(document).ready(function () {
      $('#myform').ketchup();
  });
// ]]>
</script>

HomepagePresenter.php

<?php

/**
 * My Application
 *
 * @copyright  Copyright (c) 2010 Vaclav Bohac
 * @package    MyApplication
 */



/**
 * Homepage presenter.
 *
 * @author     Vaclav Bohac
 * @package    MyApplication
 */
class HomepagePresenter extends BasePresenter
{
    public function createComponent($name)
    {
        switch ($name) {
        case "MyForm":
            // create and register AppForm component 
            $myform = new AppForm($this, $name);

            // add fields to the form
            $myform->addText("name", "Your username: ")
                ->addRule(Form::MIN_LENGTH, "Your username is too short. Minimal length is 6.", 6)
                ->addRule(Form::FILLED, "Your username is required!");

            $myform->addText("mail", "Your email: ")
                ->addRule(Form::FILLED, "Your email is required!")
                ->addRule(Form::EMAIL, 'You email is not in the correct form!');

            // add submit button
            $myform->addSubmit("sign", "Sign up");
            $myform->onSubmit[] = array($this, "myformMethod");
            
            // set new client-side validation properties
            $myform->getElementPrototype()
                ->id('myform');
            $myform['name']->getControlPrototype()
                ->class('validate(required, username, minlength(6))');
            $myform['mail']->getControlPrototype()
                ->class('validate(required, email)');
            
            // turn off default client-side validation rendering
            $myform->getRenderer()->setClientScript(null);
        return;
        default:
            parent::createComponent($this, $name);
        }
    }
    
    public function myformMethod(AppForm $form)
    {
        $mysession = Environment::getSession("mysession");
        $mysession['formdata'] = $form->getValues();
    }

    public function beforeRender()
    {
        $this->template->message = array();
        $this->template->js = array();
        $this->template->css = array();
    }
    
    public function renderDefault()
    {
        $mysession = Environment::getSession("mysession");
        
        if (count($mysession['formdata'])) {
            $this->template->message[] = 'Your name is ' . $mysession['formdata']['name'];
            $this->template->message[] = 'Your email is ' . $mysession['formdata']['mail'];
        }
        else {
            $this->template->message[] = 'Please fill the form lower on this page to sign up for our newsletter';
        }
        
        // stylesheets
        $this->template->css[] = 'jquery.ketchup.css';
        
        // js libs
        $this->template->js[] = 'jquery.min.js';
        $this->template->js[] = 'jquery.ketchup.js';
        $this->template->js[] = 'jquery.ketchup.validations.basic.js';
        $this->template->js[] = 'jquery.ketchup.messages.js';
    }

}