1 November 2011

Form validation with Nooku Framework

Nooku Server - Form Validation

Responsive validation feedback on forms is no longer a “nice to have” feature in modern web apps, it’s a standard that users have come to expect to be there.

In Nooku Framework Alpha 3, we added a new API that loads the forms validation library in MooTools More for you. And we implemented it in Nooku Server Alpha 3 to improve the usability of refactored components.

Today I’ll show you how easy it is to get started by simply adding CSS classes to your form inputs. Then I’ll show you how easy it is to create your own input validators for when you need to validate something custom.

Let’s get started

This tutorial will assume that you have a Nooku component already setup, with forms and everything else needed for the application to work. This tutorial aims to help you enhance your form, not build one from scratch.

The example component is just like a simplified com_weblinks, it renders a set of links.

So without further ado, this is the basic layout we’ll be enhancing:

<form action=”” class=”-koowa-form”>
<input type=”text” name=”title” value=”<?= @escape($treasure->title) ?>” />
<input type=”text” name=”url” value=”<?= @escape($treasure->url) ?>” />
</form>

The first thing you need to do, is to load the validation behavior.
You do that by placing this call somewhere close to where you load koowa.js

<?= @helper(‘behavior.validator’) ?>

So in this form, there’s a couple of things needed to be improved. The title is a required field, the url field is required as well, but it also needs to be validated as a proper url.

The way to do that is by adding CSS classes on the form inputs and instructing the validator on how to validate the form.

<input type=”text” name=”title” value=”<?= @escape($treasure->title) ?>” class=”required” />

Valid

Nooku Server - Form Validation

Invalid

Nooku Server - Form Validation

<input type=”text” name=”url” value=”<?= @escape($treasure->url) ?>” class=”required validate-url” />

Valid

Nooku Server - Form Validation

Invalid

Nooku Server - Form Validation

The result:

<?= @helper(‘behavior.validator’) ?>
<form action=”” class=”-koowa-form”>
<input type=”text” name=”title” value=”<?= @escape($treasure->title) ?>” class=”required” />
<input type=”text” name=”url” value=”<?= @escape($treasure->url) ?>” class=”required validate-url” />
</form>

Keep your cool

Now with these added, we already have very basic validation up and running. When you’re having fun, it’s easy to run a bit crazy and add anything and every possible kind of validation you can to make the most out of what you can do. But you need to stay cool and always have the purpose of what you’re doing crystal clear in your mind. The form validation is meant to help the user workflow be as smooth and painless as it can be.

For example, we don’t add a validator on slug/alias inputs that bugs the user if he forgot to lowercase it properly simply because slug fields can be transformed to lowercase and transliterated automatically in PHP.

Rule of thumb

Rule of thumb : Our first goal should always be to make the application do as much as it can to aid the user. If it can’t, then we can help the user by validating his input.

So the forms validation that calls for user action should only be done on things that our application can’t figure out by itself .

Next time we’ll take a look at how we can automate things a bit more.

Posted in Framework, Tutorial and tagged as

  • http://blog.hersoncduz.com Herson Cruz

    great news! And thank you for your awesome job nooku team!

  • http://pulse.yahoo.com/_ERSDRML2R7NQGXUCO7LIGXRVSU Alexander

    It’d be good if there’s a proper validation library/class in Nooku for server side validation. Joomla provides some Helpers like Array and JFilter but this is very far from a proper validation class.

  • http://www.facebook.com/stipsan Stian Emil Didriksen

    There’s automatic sanitizing of data, and while validation is not automatic it’s still fully supported, you just need to write the code that validates yourself.

    It would be great if the fw were smart enough to do both server side and client side validation for you out of the box with minimal code, so that your app is both very user friendly and “forgiving”, while being very conventional and easy to work with when you’re doing apps that talk to your app over REST.

    Right now Nooku FW is smart enough on the REST aspect and will automatically make sure that fields in your database table that are marked “required” have to be present or the request will fail.
    It’s hard to make the fw automatically figure out in what other cases you would want the request to fail when invalid, instead of falling back to sanitizing or the default value.

    The clientside validation is just our first iteration so it is relying on html markup for knowing how to validate your form, our validation class isn’t talking to or benefiting from table schema + table objects and their column metadata yet.

    So just know that this is our very first iteration of forms validation and we think there’s a whole lot of room for improvement :)

    We’re getting there, one step at a time ;)

  • http://pulse.yahoo.com/_ERSDRML2R7NQGXUCO7LIGXRVSU Alexander

    From what I’ve just read you’ve got pretty good ideas for expanding the validation functionality which sounds awesome!!!

blog comments powered by Disqus