Home > Uncategorized > VanadiumJS.com is live !!!

VanadiumJS.com is live !!!

I’m pleased to announce that the first version of demo site presenting my client-side validation toolkit Vanadium is on the go.

Vanadium is declarative, client-side validation toolkit. There is no need for coding. Just use simple markup in side class attributes (or if you are HTML purist you may prefer to attach it as external configuration file in json format).

E.g. for required field one can define it as: <input type="text" class=":required“/>

It also make use of Ajax. E.g checking for username availability can be expressed as:

<input type="text" class=":ajax;/username_checker/check.json“/>

Another handy feature is hierarchical validation regions, lots of build-in validator types and easy way of creating custom ones.

I’ll appreciate any comments on it.

You can give it try on VanadiumJS.com. The code is open source and available on github.

Categories: Uncategorized Tags:
  1. Ionut
    September 5th, 2009 at 07:32 | #1

    hi

    great work on the plugin
    i have one question
    now the ajax request is made like this
    http://vanadiumjs.com/check_username.json?_=1252150224636&value=a&id=field
    is posible to change the request to something like
    http://vanadiumjs.com/check_username/1252150224636/a/field/

  2. Ionut
    September 5th, 2009 at 07:33 | #2

    sorry made a mistake

    i mean in something like this

    site.com/check_username/json/1252150224636/a/field/

  3. Dave
    September 5th, 2009 at 14:45 | #3

    HI Daniel,

    Your vanadiumjs script looks interesting. I like that you provided the ability to define the id’s and behavior in the javascript rather than REQUIRING use of the css class’s.

    One question, for the AJAX validation I looked through the documentation and did not see what the json structure was, and an example server side script (php?) would be a nice addition to the documentation.

    - Dave

  4. September 5th, 2009 at 17:25 | #4

    you’ve done a great job! I thinkg it amazing! and easy to use as well !
    I’m gonna read more about it and try to implement it in my contact form !

    congratulation
    also thanks for share!

    adeux

  5. September 5th, 2009 at 19:24 | #5

    @Ionut
    Ajax validator uses jQuery’s $.getJSON function to make the asynchronous request. So for now this is the only way it works.

  6. September 5th, 2009 at 19:37 | #6

    @Dave
    Hi Dave,

    You right. The docs are rather modest. I’m looking for contributors to Vanadium’s documentation.

    The structure of JSON holding the validation result from server of ajax-based validator is:

    {
    success: (true/false),
    message: (MESSAGE)
    }

    MESSAGE is of string type and contains validation message from server.

    One can also post the entire form in background request to validate it on the server-side. I’m going to write some docs about it soon.

  7. September 5th, 2009 at 19:42 | #7

    @dlv
    It is really nice to hear somebody actually likes it. Thanks.

  8. Claudio
    September 7th, 2009 at 03:30 | #8

    Hi Daniel,
    your work is very very good.
    Thank you for share this code.
    Any news for localization on other language ?
    Regards.

  9. September 7th, 2009 at 06:28 | #9

    Hi Claudio,

    The localization functionality is build-in into Vanadium. Simply instead of:

    <input id="pass" class=":email" type="text">

    type

    <div id="adv" style="display:none">
    Por favor, introduzca una dirección de correo electrónico válida. Por fred@domain.com ejemplo
    </div>
    <input id="pass" class=":email;;adv" type="text">

    Cheers,
    Daniel

  10. jr
    September 8th, 2009 at 18:15 | #10

    Hi

    Great work!

    Would really like to see a port for Prototype/Scriptaculous. :P

    Anyone?

  11. Piotr
    September 17th, 2009 at 13:40 | #11

    Hi!
    Fajne, wrzucilbym na pare portali, ale dla moich zwierzchnikow brakuje konkretnego okreslenia typu licencji i dokumentacji, tworzenie metoda prob i bledow(glownie bledow) nie wchodzi w gre. Niemniej jednak proejekt fajny ;-)

    Pozdrawiam
    pejot

  12. September 17th, 2009 at 16:04 | #12

    @Piotr
    Cześć Piotr,

    Licencja to MIT jest ona business-friendly. Informacje o tym można znaleźć na stronie hostującej projekt http://github.com/lambder/Vanadium. Zdaję sobie sprawę że dokumentacja nie jest pełna, dlatego zachęcam do zadawaia pytań (najlepiej po angielsku). W ten sposób powstanie wsad do uzupełnienia dokumentacji.

    Pozdrawiam,
    Daniel

  13. Piter
    September 18th, 2009 at 02:27 | #13

    1. Im a scalability guy not an js expert so some of the qyestions can sound strange. Ok, so is there a simple way to attach some other events to the input fields than onkeup that would trigger the validation? Currently all forms on my project are checked after triggering “onblur” event. Also Id like to know if there is any way to ovveride the vanadium generic ajax response structure to correspond to my serwer side generic responses {’status’:'error/ok’,'data’:'xyz’} ?

  14. September 18th, 2009 at 07:13 | #14

    Thanks for comment. Yes you can have it. There are currently four options for it. See below:

    1. immediate validation (default):

    <input class=":required" type="text">

    2. delayed validation (waits 500ms):

    <input class=":required :wait;500" type="text">

    3. only when leaving field (losing focus) validation:

    <input class=":required :only_on_blur" type="text">

    4. only when the whole form is about to be submitted:

    <input class=":required :only_on_submit" type="text">

    Regarding Ajax validation, I need to workout nice convention or a way to easily configure it. Also I plan to make it host address independent by using some form of JSONP.

    Cheers,
    Daniel

  15. September 18th, 2009 at 10:17 | #15

    Looks great. I think the holy grail here would be a plugin for Rails and other frameworks that automatically generates the VanadiumRules object from your model constraints.

  16. September 18th, 2009 at 11:05 | #16

    @Jordan Running
    Yes, I second that. This is next thing to do, just after finishing ajax using jsonp.

    I’m glad, you like it !

  17. September 19th, 2009 at 08:07 | #17

    Hi Daniel,

    Awesome script mate!

    I am having a bit of a problem displaying the custom error message:

    Oops, please enter a Screen Name of 6 characters or more

    The :min_length only returns the default error message

    The same for :same_as;pass;;advPassConfirm

    and

    :accept;;advAccept

    What am I doing wrong?

  18. September 20th, 2009 at 10:03 | #18

    awesome! keep up the good work!

  19. September 20th, 2009 at 10:43 | #19

    @Neo
    Hi Neo,

    I love to help you. Please send me the whole HTML and I’ll see what I can do.


    Cheers,
    Daniel

  20. Michael
    October 10th, 2009 at 05:31 | #20

    Hello,

    i have two inputs, i want to validate that one of them is used like a OR query.

    Thanks for your very cool validation script!

  21. March 8th, 2010 at 09:11 | #21

    @Daniello

    Hello,

    that JSON validating is not working for me, but this
    one yes :

    [{
    "success": false,
    "message":"msg"
    }]

    Anyway thank you for this awesone plugin.

  1. No trackbacks yet.