Zebda

Zebda is a general purpose javascript library built on Prototype 1.4.0.

Although it has some utility functions, the main purpose is handling client-side form validation.

News

Version 0.3 released (2006-07-27)

Bugfixes and conditional validation. See the examples

What does it do?

  • Handles client-side form validation in an easy but powerfull way.
  • The validation rules and error messages are expressed using custom HTML attributes.
  • There’s no need to add javascript statements (onLoad, onSubmit).
  • It’s extensible: New validation rules can be easly added.
  • Provides clean separation of structure, presentation and behaviour.

How does it work?

The validation rules and error messages are expressed using custom HTML attributes.



<form method="POST" action="/login">
<input type="text" name="name" id="name"
z:required="true" z:message="Please write your name" />
<input type="submit" />
</form>

It’s possible to add multiple rules and an error message for each one:



<input id="email" name="email" type="text"
z:required="true" z:required_message="Please write your email"
z:email="true"
z:email_message="Write your email in standard format" />

In the example above, the message z:required_message it’s used when the z:required rule fails. In general, when a rule is declared the atributte z:rulename_message is used for the message, if it doesn’t exist the attribute z:message is picked.

Validation rules

Attribute Description Additional arguments
z:required The field must have a value. It can be a text box, text area, or a select list None
z:length Checks for maximum or minimun length of the text min: Minimun length. max:Maximum. One of both is required
z:numeric Checks for a numeric format isFloat:true,false. Optional. Default: false
z:email Checks for an email format None
z:regexp Uses a regular expression as the condition exp: Regular expression (eg: /[A-Z]{5}/)

The arguments are defined using JSON syntax:


z:length="{max: 10, min: 5}"
z:regexp="{exp: /[A-Z]{5}/}"

Filters

It’s also possible to preprocess text fields and transform their values before validation.


<input id="login" name="login" class="text" type="text"
z:required="true" z:required_message="Please write your username"
z:filter_trim="true" z:filter_lowercase="true" z:length="{max: 10}"
z:length_message="The username must have less than 10 characters" />

Here, the filters z:filter_trim, z:filter_lowercase are applied to value of the field before validation.

Filter Description
z:filter_trim Removes spaces at the begin and the end of the string.
z:filter_trimleft Removes spaces at the begin of the string
z:filter_trimright Removes spaces at the end of the string
z:filter_singlespace Removes double spaces
z:filter_lowercase Converts the string to lowercase
z:filter_uppercase Converts the string to uppercase
z:filter_numbers Removes non-numeric characters

Demo

The demo is based on form usability examples by
Cameron Adams (The man in blue)
.

Installation

Include the files zebda.js and prototype-1.4.0.js via a script tag at the top of the page.


<script type="text/javascript" src="prototype-1.4.0.js"></script>
<script type="text/javascript" src="zebda.js"></script>

Support

Visit the Zebda Google Group for support and development discussion.

Download

zebda.js version 0.2

License

CC-GNU LGPL
This software is licensed under the CC-GNU LGPL.

Acknowledgements

Sam Stephenson
Prototype, an excelent JavaScript framework (now with iterators!)
Sergio Pereira
prototype documentation
Peter-Paul Koch
Quirksmode
Cameron Adams
Form Usability examples

About the name Zebda

The name Zebda was chosen after the french music group.

About custom HTML attributes

Declaring custom HTML attributes is a well known technique, and also controversial, that has been dicussed before; Peter-Paul Koch explains its benefits and problems in the article JavaScript Triggers.

In Zebda, the namespace prefix z has been chosen but there’s no need to declare it. A schema has not been created nor a DTD wich defines the custom attributes.

 

 

Juan Manuel Caicedo

RSS
Funciona con / powered by