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.


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" />

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_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}/}"


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


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


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>


Visit the Zebda Google Group for support and development discussion.


zebda.js version 0.2


This software is licensed under the CC-GNU LGPL.


Sam Stephenson
Prototype, an excelent JavaScript framework (now with iterators!)
Sergio Pereira
prototype documentation
Peter-Paul Koch
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

Funciona con / powered by