Vanadium, V23, Vanadis - Norse goddess of beauty and fertility, Element which name is closest to VALIDATION
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
dist
doc
lib
src
tools
README.textile
RakeFile
start.sh
test-dev.html
test-embedded.html
test-selects.html
test.html
test_submit.json
user_exists.json

README.textile

Flattr

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.

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)