Thursday, June 12th, 2008

Validanguage 0.9: More form validation

Category: HTML, JavaScript

Form validation may seem a little boring, but it is still one of the low hanging fruits for Ajax.

Validanguage is a simple new validation framework that you can access and configure through HTML (via comments rather than attributes) and a JSON API.

For example, if you place the following next to an input, it will flash red if you try to type in anything other than a number, a dollar, or a period (good for a price).

  1. <!-- <validanguage target="example" mode="allow" expression="numeric$." /> -->

Or you can configure it via JSON:

javascript

  1. validanguage.el.example = {
  2.   characters: {
  3.      mode: 'allow',
  4.      expression: 'numeric$.',
  5.      onsubmit: true,
  6.      errorMsg: 'You may only enter numbers, periods,
  7.                 or the dollar sign.'
  8.   },
  9.   required: true,
  10.   errorMsg: 'Please enter a valid monetary amount',
  11.   onsuccess: 'someObject.successHandler',
  12.   onerror: [errorHandler1, errorHandler2]
  13. }

Features

  • 100% unobtrusive javascript, name-spaced under the global validanguage object. No inline event handlers required (not even to block form submissions)
  • No external libraries required (optional Prototype integration)
  • Use inheritance to manage your validation settings. Define a setting globally, per-form, or per-element.
  • Supports a choice of two APIs:
  • HTML-like API placed inside comment tags. The choice for ease of use and simplicity.
  • JSON-based API. For advanced configuration.
  • Easily configure custom validation functions to be triggered onblur, onsubmit, onchange, etc.
  • Add onsuccess and onerror callback functions to integrate Validanguage into your existing site design.
  • All validation functions and onsuccess/onerror callbacks are scoped so that the this keyword refers to the validated element.

    A normalized “text” argument is supplied to validation functions for textareas and textboxes.

    The inherited error message is automatically supplied to the onerror callback(s) as the first argument.
  • Easy-to-use keypress suppression.
  • Posted by Dion Almaer at 7:25 am
    11 Comments

    +++--
    3.4 rating from 18 votes

    11 Comments »

    Comments feed TrackBack URI

    I’m not sure if we should call the object notation in JavaScript now JSON.

    Comment by Harald — June 12, 2008

    Looks a lot like jquery validate plugin, but not necessarily as good.

    Comment by ilazarte — June 12, 2008

    gotta luv the pictures of the dead bodies on the right hand side.

    Comment by boodie — June 12, 2008

    >>I’m not sure if we should call the object notation in JavaScript now JSON.

    Why not?

    Comment by Nosredna — June 12, 2008

    @harald:
    JavaScript Object Notation. What else should we call it?

    Comment by tj111 — June 12, 2008

    Good, but validation for copy/paste not working

    Comment by sirus — June 13, 2008

    tj111: But giving options to a method in an object is not a interchange format. E.g. JSON has no function data type. Developers should simply not confuse a simple object notation in JavaScript and sending serialized data as JSON.

    Comment by Harald — June 13, 2008

    Harald,
    You have a good point about Javascript’s object notation not being synonymous with JSON and I will update my documentation to reflect this.

    ilazarte,
    Validanguage offers features not present in jQuery Validation and vice versa. One important difference where Validanguage wins out however is size (uncompressed): 53k versus 130k. Also, please bear in mind that this is only my initial release.

    sirus,
    Character suppression for copy/paste is not feasible without a timeout or onkeyup function to periodically check if a large portion of the text has changed. Instead of this approach (which I may add later), I opted to reject invalid input when the form is submitted.

    Big ups to Ajaxian for posting this blurb. I really appreciate this. Based on the positive feedback on here and on my blog, I intend to start work on the next version of Validanguage soon. Stay tuned…

    Comment by drlongghost — June 13, 2008

    @harald: Ok I see what your getting at. I think the key word is “Notation”, ie you are notating non-javascript data / objects to be able to be interpreted as javascript objects, hence JSON. Had you said “object syntax” instead of “object notation” I probably would have got what you were trying to say the first time ;).

    Comment by tj111 — June 13, 2008

    I like the idea, but i didn’t find it really smooth and easy to use.

    So i’ve made mij own validator object which is hosted by google code: http://code.google.com/p/fh3jsvalidator/

    you can also can use this javascript in combination with [url=http://www.formhandler.net]Formhandler[/url]

    I hope someone will like it ;)

    Comment by Arian — June 15, 2008

    hey, i found that this script is the ideal for using object with the help of prototype…

    arian – i like it, hope u will do d same in future :)

    Comment by Ajaxester — July 11, 2008

    Leave a comment

    You must be logged in to post a comment.