validator.js - Client-side form validating

I’ve been busy playing with some JavaScript in these last few days. One of my projects was to create a form-validation similar to the one Remember The Milk has for creating new users. So validator.js was born. You can easily spot the born-on-RTM’s-functionality in the fact that the valid/invalid images I use are directly stolen from RTM. Sorry guys, I’m not the creative type.

Of course, a JavaScript ain’t worth much without a showcase. So here it is: http://sevengoslings.net/validator.js/testform.html

How do I use it?

It quite simply works by creating an instance of the Validator class and calling apply() on said instance:

window.onload = function() {
  new Validator( 'id-of-your-form', 'class-name-of-your-row-elements', 'class-name-of-your-hint-element').apply();
}

You then add a ‘validator‘ attribute to your input element with the name of the validator you need to apply to the field. Currently I only have 3 different validators.

• min2chars: The field must contain at least two characters
• notempty: The field must contain something
• email: The field must contain a valid email (well, you can find valid emails that it wont validate, but any normal emails address will pass)

Ohh, and important. Remember to include Mootools first. That is a requirement for it to work.

Changing the way it works

But when are you guys ever happy with a one-size-fits-all approach to silly JS functionality? So queue inspirational music and much ado about nothing. Here comes the configurability.

setImages: The method setImages( validSrc, invalidSrc, widthInt, heightInt ) allows you to change which images to display.

setEventsToMonitor: The method setEventsToMonitor( eventsArray ) allows you to change which events will call the runCheck() check on the field. So if you only want it to check onblur, just supply ['blur'] as the parameter.

addValidator: If you feel like my default validators aren’t worth two pennies, you can add more with the function addValidator( nameString, validatorObj ). Just supply a name and a object with the two functions: valid(value) and hint().

Of course all these functions will return itself so you can chain them together to avoid multi line setup. Because I hate those.

-fangel

Read more | April 8th, 2007 | JavaScript | No comments

Pundit demo-application

Heyya
Soo, this it actually old news but since I never blogged about it, here goes. I did a small demo-application for Pundit. It’s one more of the ever useless “how to create a blog in 20 minutes with framework X” but with one important twist - it doesn’t have a video or anything. Just the [...]

Read more | April 8th, 2007 | Pundit | No comments

Pundit changes. And to the better as a matter of fact.

Weekend. Music. Coding. Three words that when brought together means changes to Pundit. And since I was getting bored with two specific things in the framework I had to go and change both. And of course one breaks all things known as backwards-compatibility.
So.. Here’s a quick intro to the things I got bored of typing [...]

Read more | March 18th, 2007 | Pundit | No comments

Pundit progress: Solr integration and revision 100 passed

I’ve spent a lot of time this weekend on added features to Pundit. Most noticeable is the Solr integration. For all you guys who don’t know what Solr is, its a search-thingy which is really fast and just utterly cool. Go read up on it at their site.
It only took 221 lines of code and [...]

Read more | March 11th, 2007 | PHP, Pundit | No comments

LinuxForum 2007 (dk) && Coding at the DEMA

Hi everybody.
I manage to persuade the proxy into letting me back online (for some reason it refused to do this simple job for the last week or so.. )
So I have to take advantage of the situation while it lasts and give you some updates. I’m almost done with my first month at the DEMA [...]

Read more | March 2nd, 2007 | Personal, UniteIT | 2 comments