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

Author: Daniel Kwiecinski (daniel.kwieicnski@lambder.com)

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:

email:

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

name:

<input class=":required :alpha :wait;500 :min_length;5 :ajax;http://github.com/lambder/Vanadium/raw/master/user_exists.json" type="text"/>

password:

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

        <br/>

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

        <div class="vanadium-valid-advice" style="display:none;">
        </div>
        <input name="name" id="name"
               class=":required :alpha :wait;500 :min_length;5 :ajax;http://github.com/lambder/Vanadium/raw/master/user_exists.json"
               type="text"></input>
        <br/>
    </div>
    <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>
        <br/>

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

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

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;http://host.com/user_exists.json" 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.

• :ajax;http://host.com/user_exists.json in the example is server-side validation which Vanadium uses for checking if given username
  is already taken.

---

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)