The framework provides an easy mechanism for creating robust web forms with client and server side validation. Forms become components in their own right and can therefore be reused throughout the entire website if required.

For most forms created on the server, there is no client-side development required as the JavaScript validation library is fully configured from the server side. This cuts down on the development time as well as keeping the client and server side validation and messaging consistent with no extra work.

Creating a form

First, let’s create a simple login form. It will have ‘username’ and ‘password’ inputs and a confirmation button. The form has the following simple validation rules:

  • Both ‘username’ and ‘password’ must be supplied
  • ‘username’ must be at least 4 characters long
  • ‘password’ must be at least 6 characters long
  • Confirmation button to submit the form
<?php
class fLogin extends Form {
    protected function createFormItems() {
        // Create a confirmation button for this form
        $this->addButton(new Button("bConfirm", "Submit"));
        // Create username input and validation:
        $fi = new SimpleFormItem("username", "Username");
        $fi->addValidator(new IsRequiredValidator());
        $this->addFormItem($fi);
 
        // Create password input and validation:
        $fi = new SimpleFormItem("password", "Password", array("isPassword" => true));
        $fi->addValidator(new IsRequiredValidator());
        $fi->addValidator(new RegularExpressionValidator("/^.{6,}$/", "'%s' must be at least 6 characters"));
        $this->addFormItem($fi);
    }
 
    protected function process() {
        // This only gets called if validation has passed
        if(Authentication::checkPasswordStrength($this->formItems[“password”]->value) {
            // Call authentication service 
        } else {
            $this->formItems[“password”]->setMessage("Please supply a stronger password!");
        }
    }
}

Creating the controller

Next we need to create a controller. The base IxxusPage controller uses the standard XSL view to render the page. This is a very simple controller that will force the page to be secure (HTTPS) and instantiate the form fLogin.

<?php
class LoginPage extends IxxusPage {
    public function __construct(array $options = null) {
        $options["forceSecure"] = true;
        parent::__construct("ixxus.controller.login", $options, "login");
    }
 
    public function createForms(FormData $formData) {
        $formData->add(new fLogin("fLogin"));
    }
 
    protected function getData() {
        // Get any specific page data here if required
    }
 
    public function initializeFormData(FormData $formData) {
        $formData->forms["fLogin"]->initializeFormData(null);
    }
}

Creating a view

Lastly we need to render the form with the view. We are using the standard XSLT view so we just need to create some XSLT that will render our fields.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet  ...>
<xsl:template match="page[@type='ixxus.controller.login']" mode="page_title">
    <xsl:text>Login</xsl:text>
</xsl:template>
 
<xsl:template match="page[@type='ixxus.controller.login']" mode="layout_content">
    <div id="login">
        <xsl:apply-templates select="/node()/formData/forms/fLogin" mode="form"/>
    </div>
</xsl:template>
 
<xsl:template match="fLogin" mode="formItems">
    <fieldset>
        <h2>Please login</h2>
 
        <xsl:apply-templates select="formItems/username" mode="formItem"/>
        <xsl:apply-templates select="formItems/password" mode="formItem"/>
 
        <p class="options">
            <xsl:apply-templates select="buttons/bConfirm" mode="formItem"/>
        </p>
    </fieldset>
</xsl:template>
</xsl:stylesheet>

And that's it. This will now render our login form with the ‘username’ and ‘password’ fields with full client and server side validation. The form itself and related meta data is created automatically by the XSLT framework.

If you are interested, the auto-generated client-side JavaScript validation is configured using an object literal and in this example would look like this:

<script type="text/javascript">
//<![CDATA[
    v("fLogin",[
        {n:"username",
            v:[new IsRequired("Please supply a value for \'Username\'"),
            new RegularExpression("\'Username\' must be at least 4 characters",/^.{4,}$/)]
        },
        {n:"password",
            v:[new IsRequired("Please supply a value for \'Password\'"),
            new RegularExpression("\'Password\' must be at least 6 characters",/^.{6,}$/)]
        }
    ]);
// ]]>
</script>