ActiveForm 0

Posted by luca
on Monday, July 23
ActiveForm is a JavaScript library, based on Prototype, useful to validate your forms in an automagically and pluggable way.

Automagically? Simply, You have to declare your fields, eventually your error messages, and.. nothing else!!

Pluggable? ActiveForm contains most common validations (regular expressions, presence, conditional presence..), and it performs them in a certain order. If you don't like this, you can simply redeclare a method, or exclude it from validation process.
ActiveForm performs the validation of a single field following a modular way, executing all methods declared for validation purposes.
This approach makes easy disable, enable, add code portions.
You must simply override a method or declare a new one..

ActiveForm follows Ruby on Rails philosophy: Convention over Configuration and Don't Repeat Yourself.

Here a little example, a login form:
LoginForm = Class.create();
LoginForm.prototype = Object.extend(ActiveForm.prototype, {
  formElement : {id : 'login', event_trigger : 'submit'},
  fields      : {username : {required : true},
                 password : {required : true}}
})


What we have done?
The first line is the class instantiation, second one needs to extend ActiveForm superclass.
The third line is the form element declaration, we specify his id and his validation event.
In the fourth line we declare our fields and we explicit that they are required.

ActiveForm allows forms behavior's inheriterance, following DRY logic.
In your applications, you have similar forms, why write same code for similar pages?
Do you rememeber previous example? if you have a login form (username and password) and a registration form (username, email, password and password confirmation), why not extend first form behavior to the second one, without write a single line of code?
How it works? I've created a Rails like handler: before_create. It allows to extends variables (not override), before class instantiation. Example:
RegistrationForm = Class.create();
RegistrationForm.prototype = Object.extend(LoginForm.prototype, {
  formElement : {id : 'registration', event_trigger : 'submit'}
})
ActiveForm.prototype.before_create(
  Object.extend(LoginForm.prototype.fields,
    fields      : {email                    : {required : true},
                   password_confirmation    : {required : true}}
  )
)


What we have done?
First part of the code needs to declare our subclass, notice we are extending LoginForm (not ActiveForm), because we want inherit its behaviors.
The second part needs to extend fields variable!! When RegistrationForm will be instantiated, fields will had four elements, not two!! Do you like it? Here other features:

  • Prototype based
  • 100% OOP
  • Total/partial inheriterance
  • Non-Obtrusive scripting
  • Validation modulatity
  • Validation customization
  • Blocking/Non-Blocking validation
  • Dynamic visual style customization for each form element
  • Most common regexps already included (you can extend/override them)
  • Most common validation (you can extend/overrider them)
  • Crossbrowser: tested on IE 6+, FF 2+, NS 8+, Op 9+ on Windows XP and Linux (sorry, for Mac people, but i haven't access to a Mac OS X machine)
How much it cost? Nothing!! ActiveForm is Free Software, released under the LGPL License.


Download