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).
HTML:
-
-
<!-- <validanguage target="example" mode="allow" expression="numeric$." /> -->
-
Or you can configure it via JSON:
JAVASCRIPT:
-
-
validanguage.el.example = {
-
characters: {
-
mode: 'allow',
-
expression: 'numeric$.',
-
onsubmit: true,
-
errorMsg: 'You may only enter numbers, periods,
-
or the dollar sign.'
-
},
-
required: true,
-
errorMsg: 'Please enter a valid monetary amount',
-
onsuccess: 'someObject.successHandler',
-
onerror: [errorHandler1, errorHandler2]
-
}
-
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.
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.
3.6 rating from 13 votes
I’m not sure if we should call the object notation in JavaScript now JSON.
Looks a lot like jquery validate plugin, but not necessarily as good.
gotta luv the pictures of the dead bodies on the right hand side.
>>I’m not sure if we should call the object notation in JavaScript now JSON.
Why not?
@harald:
JavaScript Object Notation. What else should we call it?
Good, but validation for copy/paste not working
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.
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…
@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 ;).
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 ;)
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 :)