Vanadium, V23, Vanadis - Norse goddess of beauty and fertility, Element which name is closest to VALIDATION
Switch branches/tags
Nothing to show
Latest commit 36d3902 Jun 10, 2010 daniello experimenting with readme



Vanadium – Unobtrusive, Declarative, Server-side Technology Agnostic,
Ajax Enabled, Server-side Aware, Client-side Validation

Author: Daniel Kwiecinski (

Say you want to validate weather user-name is unique (using server-side script), his email address valid and password being at least 6 characters long, repeated to confirm there was no typos. Just do:

<input class=":required :wait;200 :email" type="text/>

<input class=":required :alpha :wait;500 :min_length;5 :ajax;" type="text"/>

<input class=":required :min_length;6" id="pass" type="password"/>

repeat password:
<input class=":same_as;pass" type="password"/>

<form id="signup-form" action="/test_submit.json" name="f" method="get" class=":container">
    <div id="email_and_name" class=":container">
        <label class="desc" for="email">email: </label>
        <input name="email" id="email" type="text"
                   class="field text large  :required;;email_advice :wait;200 :email;;email_advice"></input>


        <label class="desc" for="name">name: </label>

        <div class="vanadium-valid-advice" style="display:none;">
        <input name="name" id="name"
               class=":required :alpha :wait;500 :min_length;5 :ajax;"
    <div id="passwords" class=":container">
        <label class="desc" for="pass">password: </label>
        <input class=":required :min_length;6" name="password" id="pass" type="password"></input>

        <label class="desc" for="repeat_pass">repeat password: </label>
        <input class=":same_as;pass" name="repeat_password" id="repeat_pass" type="password"></input>

    <input type="submit" value="submit"/>

Vanadium is JavaScript validation toolkit that makes client-side validation easy.
Here’s a rundown of the functionality:

  • Validation rules are applied to HTML elements by adding special markup classes. E.g. adding ‘:required’ to element’s classes
    makes the element being validated against provided value
  • Instead of markup, one can use external definition provided as json structure.
  • It is Ajax enabled in that sense one can declare particular field being validated by the result of the server response.
    E.g. adding ‘:ajax;/path_on_server/user_exists.json’ to element’s classes will cause any change to value of that element being
    sent to server as request. The response is expected to be json structure in the form of:
    {success: (true/false), [message: (MESSAGE_TEXT)], [advice_id: (ID_OF_THE_HTML_ELEMENT_USED_FOR_INJECTING_THE_MESSAGE)]}

To have a html form with 4 fields: username, email, password and repeated password.
Where username is required and has to be at least 5 characters long and unique in the system, email is valid email address
password is required and has to be at least 6 character long, repeated password has to be the same as password, then one use
the following HTML:

<input id="name" class=":required :min_length;5 :ajax;" type="text">
<input id="email" class=":required  :email" type="text">
<input id="pass" class=":required :min_length;6" type="password">
<input id="repeat_pass" class=":same_as;pass" type="password">
  • The the deafult (:;) markup prefix and separator can be reconfigured.

Compatible with JQuery 1.3.2 (will be using other JS toolkits as well soon)
Tested in: Firefox 3.5 (PC/Mac), Safari 2 (Mac), IE 6+, Opera 9 (PC/Mac)