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
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.